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

这是我的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>

PMBLT000164

上面的HTML基于json数据

编辑：

我在JQUERY中尝试了以下代码

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

var选项=$（“#选项”）；
$。每个（data.master_项目，功能（i，a）{
options.append（$（“”）.val（a）.text（a））；
});

好吧，我想可以通过以下方法来实现：

var$select=$（''）.attr({
名称：“主项”
});
$.each（data.master_项、函数（optGroupLabel、选项）{
变量$optGroup=$（''）.attr({
标签：optGroupLabel
});
$。每个（选项、功能（选项键、选项值）{
变量$option=$（''）.attr({
价值：期权价值
}).文本（可选值）；
$optGroup.append（$option）；
});
$select.append（$optGroup）；
});
$（'body'）。追加（$select）；

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

---

我在

.attr

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

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

小提琴：我用了一个函数检查。与其他解决方案相比，这种方法的优点是：数据可以包含任意多的嵌套级别

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);
​

var选项=$（“”），
addOptions=函数（选项、容器）{
$。每个（选项，功能（i，选项）{
if（typeof（opt）=“字符串”）{
container.append（$（“”）.val（opt）.text（opt））；
}否则{
var optgr=$（“”）.attr（'label'，i）；
添加选项（opt、optgr）
container.append（optgr）；
}
});
};
添加选项（数据、选项）；//或添加选项（数据主项、选项）；
$（'body'）。附加（选项）；
​

@JosephDreamer抱歉，我现在添加了。本文中提到的相同逻辑应该适用。请避免发布仅链接的答案。如果您将代码直接复制到答案正文中，您的帖子将更有价值。1.研究人员不需要将chase联系起来。2.Stackoverflow为js提供了可运行的代码段功能。3.如果外部链接被更改或删除，你的答案对研究人员来说毫无价值。

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);
​