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

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

好吧，我想它可以像做这样 ：

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

我用函数检查这个小提琴 。 这相对于其他解决方案的优势：数据可以包含您想要的嵌套级别。

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/