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

Posted 2023-02-16

【中文标题】如何从 JSON 填充下拉项目？ [复制]

【英文标题】：How to populate dropdown items from JSON? [duplicate]

【发布时间】：2017-08-09 03:30:44

【问题描述】：

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

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

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

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

编辑： 设置值无效

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

【参考方案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>

【参考方案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>

【讨论】：

这是我见过的最糟糕的遍历数组的方式！

@ibrahimmahrir 你有没有在纯 JS 中看到更好的实现，也适用于 IE

for(var i = 0; i < serverTypes.length; i++) ... 呢？？？你熟悉吗？？？

好多了。无论如何，这里没有必要生气，所以请冷静下来。

没有愤怒！我只是给了你一个提示而已！