Question

我有以下JSON数据，我想从中填充html选择元素，请不要看到如何使用带有这样的json数据的每个循环。感谢。

// JSON

[{
    "group": "US (Common)",
    "zones": [{
        "value": "America/Puerto_Rico",
        "name": "Puerto Rico (Atlantic)"
    }, {
        "value": "Pacific/Honolulu",
        "name": "Honolulu (Hawaii)"
    }]
}, {
    "group": "Africa",
    "zones": [{
        "value": "Africa/Tunis",
        "name": "Tunis"
    }, {
        "value": "Africa/Windhoek",
        "name": "Windhoek"
    }]
}]

和html select元素如下所示：

<select id="timeZones"></select>

这是JS代码无效：

var $select = $('#timeZones');
$.ajax({
    url: 'timezones.json',
    dataType: 'JSON',
    success: function (data) {
        $.each(data, function (i, val) {
            $select.append('<OPTGROUP LABEL="' + val[i].group + '"><OPTION VALUE="' + val[i].zone[i].value + '">' + val[i].zone[i].name + '</OPTION></OPTGROUP>');
        })
    },
    error: function () {
        alert("JSON ERROR");
    }
});

Answer 1

更容易在嵌套节点上执行两个函数

 success: function (data) {
    $.each(data, function (i, val) {
        bar = '<OPTGROUP LABEL="' + val.group + '">';      
        $.each(val.zones, function(zoneID,zoneData) {
            bar += '<OPTION VALUE="' + zoneData.value + '">' + zoneData.name + '</OPTION>';  
        });
        bar += '</OPTGROUP>';
        $('#timeZones').append(bar);
   });    

}

这是工作解决方案的{jsfiddle} http://jsfiddle.net/hZsQS/132/

但是你可能想看一些像jsrender这样的模板

Answer 2

看起来你必须有嵌套的$.each循环;一个循环遍历组并添加<optgroup>，内循环遍历区域并将每个<option>添加到相应的<optgroup>。

Answer 3

您可以使用Knockout Framework将json String映射到选择框（非常少的代码）。

例如： JavaScript的：

var json = '{"showFilter":["notStarted","running"],"whatEver":["one","two"]}';
  var model = ko.mapping.fromJSON(json);
  ko.applyBindings(model);

HTML：

<p>Filter: <select data-bind="options: showFilter"></select></p>
<p>WhatEver: <select data-bind="options: whatEver"></select></p>

另见： http://knockoutjs.com/documentation/options-binding.html

从JSON解析的对象数组中填充Select HTML元素

3 个答案: