How to populate dropdown items from JSON? [duplicate]

Question

I have a select element and I want to add select options from javascript. I have a ajax method and this method returns JSON object like;

"{"serverTypes":["WINDOWS","LINUX"]}"

I want to add options from this JSON. Is there any way to do this?

<select id="serverTypes" name="serverType" class="form-control"></select>

EDIT:
Setting value is not working

$('#serverTypes').val(jsonData);

Ionut Necula · Accepted Answer · 2017-03-17 14:24:07Z

5

You can loop through the JSON and append() the values:

var json = {
  "serverTypes": ["WINDOWS", "LINUX"]
};
for (var x = 0; x < json.serverTypes.length; x++ ) {
  var option = json.serverTypes[x];
  $('#serverTypes').append('<option value="' + option + '">' + option + '</option>')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="serverTypes" name="serverType" class="form-control"></select>

edited Mar 17, 2017 at 14:24

answered Mar 17, 2017 at 14:18

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michail_w · Accepted Answer · 2017-03-17 14:20:03Z

2

var data = {"serverTypes":["WINDOWS","LINUX"]};
var serverTypes = data.serverTypes;

var option;
for (var i in serverTypes) {
    if (serverTypes.hasOwnProperty(i) && i!="length"){
        option = $('<option></option>');
        option.val(serverTypes[i]);
        option.text(serverTypes[i]);

        $("#serverTypes").append(option);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="serverTypes" name="serverType" class="form-control"></select>

answered Mar 17, 2017 at 14:20

michail_w

4,4814 gold badges30 silver badges45 bronze badges

7 Comments

ibrahim mahrir Over a year ago

Just the worse way I've ever seen to loop through an array!

michail_w Over a year ago

@ibrahimmahrir Have you seen better implementation in pure JS, working also on IE<=8?

ibrahim mahrir Over a year ago

What about for(var i = 0; i < serverTypes.length; i++) { ... }??? Are you familiar with it???

michail_w Over a year ago

It's much better. Anyway, there is no need for rage here, so calm down please.

ibrahim mahrir Over a year ago

There is no rage! I just gave you a hint that's all!

|

Collectives™ on Stack Overflow

How to populate dropdown items from JSON? [duplicate]

2 Answers 2

Comments

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Linked

Related