3

我有以下 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 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");
    }
});
4

3 回答 3

2

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

 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 之类的模板

于 2012-10-31T17:59:20.877 回答
0

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

于 2012-10-31T16:48:16.293 回答
0

您可以使用 Knockout 框架将 json 字符串映射到选择框（非常少的代码）。

示例：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

于 2012-10-31T17:47:07.100 回答