0

这是我的 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));
});
4

3 回答 3

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。

于 2012-09-13T11:31:17.683 回答
1

我用了一个函数来检查这个小提琴。与其他解决方案相比，它的优势在于：数据可以包含任意数量的嵌套级别。

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);
​
于 2012-09-13T11:37:39.883 回答
0

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

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

于 2012-09-13T11:36:34.657 回答