How to populate dropdown items from JSON?

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-17T14:24:07.527

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>

score 2 · Answer 2 · answered Mar 17 '17 at 14:20

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 '17 at 14:20

michail_w

4,318
4
26
43

Just the worse way I've ever seen to loop through an array! – ibrahim mahrir Mar 17 '17 at 14:26
@ibrahimmahrir Have you seen better implementation in pure JS, working also on IE<=8? – michail_w Mar 17 '17 at 14:29
What about `for(var i = 0; i < serverTypes.length; i++) { ... }`??? Are you familiar with it??? – ibrahim mahrir Mar 17 '17 at 14:30
It's much better. Anyway, there is no need for rage here, so calm down please. – michail_w Mar 17 '17 at 14:42
There is no rage! I just gave you a hint that's all! – ibrahim mahrir Mar 17 '17 at 14:44
@ibrahimmahrir so you meant to say for each is a worse way to go through the loop? Care to elaborate why? – Coder Mar 17 '17 at 16:03
I didn't say `forEach` is a worse way, `forEach` will be great for this! – ibrahim mahrir Mar 17 '17 at 16:04

How to populate dropdown items from JSON?

2 Answers2