如何从 JSON 填充下拉项目？ [复制]

Question

我有一个选择元素，我想从 javascript 添加选择选项。我有一个 ajax 方法，该方法返回 JSON 对象，例如；

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

我想从这个 JSON 添加选项。有没有办法做到这一点？

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

编辑：
设置值无效

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

Answer 1

您可以遍历JSON 和append() 的值：

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>

Answer 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>