使用 jQuery 在 JSON 中的下拉列表中分配值答案

【问题标题】：Assigning values in Drop Downs from JSON using jQuery使用 jQuery 在 JSON 中的下拉列表中分配值
【发布时间】：2014-03-27 10:20:21
【问题描述】：

我有一些这种格式的 JSON：

"states": [
{"state":"AL","stateDescription":"Alabama","featured":"A1"},
{"state":"AK","stateDescription":"Alaska","featured":"B1"}
]

我正在填充一个下拉菜单，我一直在尝试将选项值分配给状态，并将值显示给 stateDescription，但不断出现错误。我已经尝试过这里的一些教程，但似乎都没有。

这是我填充下拉列表的代码：

 function populateDropdown(data) {
     var info = JSON.parse(data);
     var getStateDesc = _.pluck(info.states, 'stateDescription');
     var renderOptions = _.map(getStateDesc, function (val) {
         return '<option value="' + val + '">' + val + '</option>';
     }).join();
     $('#myComboBox').html(renderOptions).selectpicker("refresh");
 };

所以这成功填充了下拉列表，但是选项值与描述相同，所以当我稍后尝试删除它时它不起作用，因为值需要是“状态”而不是状态描述。

如何让第一个 <option value="' + val + '">' 等于 State？

谢谢

【问题讨论】：

标签： jquery json jquery-ui

【解决方案1】：

试试

 $(document).ready(function () {
 var data = {
     "states": [{
         "state": "AL",
         "stateDescription": "Alabama",
         "featured": "A1"
     }, {
         "state": "AK",
         "stateDescription": "Alaska",
         "featured": "B1"
     }]
 }
 $(data.states).each(function (i) {
     $("#myComboBox").append($("<option/>", {
         val: this.state,
         html: this.stateDescription
     }));
 });
 });

HTML

 <select id="myComboBox"></select>

首先，您的 json 无效。您需要在开始和结束时使用 { 和 }。然后你可以遍历json。使用.append() 方法添加选项进行选择。

Demo

【讨论】：

我选择了这个，因为它看起来更干净。用它来改造一些其他代码。谢谢

【解决方案2】：

试试这个

var jso={
    "states": [
        {
            "state": "AL",
            "stateDescription": "Alabama",
            "featured": "A1"
        },
        {
            "state": "AK",
            "stateDescription": "Alaska",
            "featured": "B1"
        }
    ]
}

function populateDropdown() {
     var output='';
     var dat= jso.states;
     for(var i in dat)
         {
             output+= '<option value="' + dat[i].state + '">' + dat[i].stateDescription + '</option>';
         }

     $('#myComboBox').html(output).selectpicker("refresh");
 }
populateDropdown();

DEMO

【讨论】：