Question

这是我的JSON代码

data = {
    "master_item":{
        "M5":{
            "PMBLT000164":"PMBLT000164"
        },
        "M8":{
            "PMBTN000020":"PMBTN000020"
        },
        "M165":{
            "PMBTN000003":"PMBTN000003","PMBTN000004":"PMBTN000004","PMBTN000006":"PMBTN000006","PMBTN000009":"PMBTN000009"
        }
    },
    "products":{
        "PMBTN000003":"PMBTN000003","PMBTN000002":"PMBTN000002"
    },
    "bulk":{
        "BBTPB000003":"BBTPB000003","BMBCT000002":"BMBCT000002"
    }
}

我想要的是我必须将其转换为三个下拉菜单

<select name='master_item'>
 <optgroup label="M5">
<option value="PMBLT000164">PMBLT000164</option>
</optgroup>
</select>

以上HTML基于json数据。

修改

我已尝试在JQUERY中使用以下代码

var options = $("#options");
    $.each(data.master_item, function(i,a) {
    options.append($("<option />").val(a).text(a));
});

Answer 1

好吧，我想可以用this：

之类的东西来完成

var $select = $('<select>').attr({
    name: 'master_item'
});

$.each(data.master_item, function(optGroupLabel, options) {
    var $optGroup = $('<optgroup>').attr({
        label: optGroupLabel
    });
    $.each(options, function(optionKey, optionValue) {
        var $option = $('<option>').attr({
            value: optionValue
        }).text(optionValue);
        $optGroup.append($option);
    });
    $select.append($optGroup);
});

$('body').append($select);

基本上，这是一个两步过程，在每一步我们都会深入了解数据结构。在第一级，我们处理optgroup，在每个optgroup中的第二个选项。

我在 .attr 中使用了哈希来简化添加更多属性。另一个重要的一点是，只有在完成后才将整个结构附加到DOM。

Answer 2

我使用了功能检查this fiddle。这比其他解决方案的优势：数据可以包含任意多的嵌套级别..

var options = $("<select/>"),
    addOptions = function(opts, container){
        $.each(opts, function(i, opt) {
            if(typeof(opt)=='string'){
                container.append($("<option />").val(opt).text(opt));
            } else {
                var optgr = $("<optgroup />").attr('label',i);
                addOptions(opt, optgr)
                container.append(optgr);
            }
        });
    };

addOptions(data,options); // or addOptions(data.master_item,options);
$('body').append(options);

Answer 3

我认为你有正确的想法，但我认为你应该只使用for循环：

小提琴：http://jsfiddle.net/stevenmtwhunt/ua7jw/

如何将JSON转换为HTML下拉菜单

3 个答案: