Javascript 如何使用optgroup在选择框中附加json数据

我是jquery的新手。我想在我的选择框中显示JSON数据。我的JSON数据是

{  
   "Color":[  
      {  
         "Id":"1",
         "Attrib_name":"Color",
         "Attrib_value":"Red"
      },
      {  
         "Id":"2",
         "Attrib_name":"Color",
         "Attrib_value":"Blue"
      }
   ],
   "Size":[  
      {  
         "Id":"3",
         "Attrib_name":"Size",
         "Attrib_value":"5.6"
      },
      {  
         "Id":"4",
         "Attrib_name":"Size",
         "Attrib_value":"5.1"
      }
   ]
}

我想基于上述json创建带有选项的optgroup。i、 e

<optgroup label="color">
<option>Red</option>
<option>Blue</option>
</optgroup>
<optgroup label="size">
<option>5.6</option>
<option>5.1</option>
</optgroup>

红色
蓝色
5.6
5.1

---

我被困在如何开始的问题上。请帮我解决这个问题。

只需将此代码的结果粘贴为HTML即可

它所做的是迭代json对象并创建元素

var json={
“颜色”：[
{  
“Id”：“1”，
“属性名称”：“颜色”，
“属性值”：“红色”
},
{  
“Id”：“2”，
“属性名称”：“颜色”，
“属性值”：“蓝色”
}
],
“大小”：[
{  
“Id”：“3”，
“属性名称”：“大小”，
“属性值”：“5.6”
},
{  
“Id”：“4”，
“属性名称”：“大小”，
“属性值”：“5.1”
}
]
}
console.log(
Object.keys（json）.map（a=>`${json[a].map（b=>`${b.Attrib\u value}'）。join`}）
)

下面是一个完整的示例，说明如何做到这一点。您只需构建HTML并使用jQuery函数将其添加到HTML文件中。检查我的电脑。代码也在下面

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
type="text/javascript"></script>

<select id="mySelect"></select>

<script type="text/javascript">
var data = {  
"Color":[  
  {  
     "Id":"1",
     "Attrib_name":"Color",
     "Attrib_value":"Red"
  },
  {  
     "Id":"2",
     "Attrib_name":"Color",
     "Attrib_value":"Blue"
  }
],
"Size":[  
  {  
     "Id":"3",
     "Attrib_name":"Size",
     "Attrib_value":"5.6"
  },
  {  
     "Id":"4",
     "Attrib_name":"Size",
     "Attrib_value":"5.1"
  }
]
};
var html = "";
for(var option in data){
   html += `<optgroup label="`+ option  +`">`;
   data[option].forEach(function(item){
   html += `<option value="` + item["Attrib_value"] + `" >`+ 
   item["Attrib_value"] +`</option>`
   });
   html += `</optgroup>`;
}
console.log('html',html);
$('#mySelect').html(html);
</script>

变量数据={
“颜色”：[
{  
“Id”：“1”，
“属性名称”：“颜色”，
“属性值”：“红色”
},
{  
“Id”：“2”，
“属性名称”：“颜色”，
“属性值”：“蓝色”
}
],
“大小”：[
{  
“Id”：“3”，
“属性名称”：“大小”，
“属性值”：“5.6”
},
{  
“Id”：“4”，
“属性名称”：“大小”，
“属性值”：“5.1”
}
]
};
var html=“”；
for（数据中的var选项）{
html+=`；
数据[选项].forEach（函数（项）{
html+=``+
项目[“属性值”]+``
});
html+=`；
}
log（'html'，html）；
$（'#mySelect'）.html（html）；

因为

jQuery

允许一个很好的api来创建

dom元素

，所以我将使用以下方法，但其他答案也可以：

var数据={
“颜色”：[
{  
“Id”：“1”，
“属性名称”：“颜色”，
“属性值”：“红色”
},
{  
“Id”：“2”，
“属性名称”：“颜色”，
“属性值”：“蓝色”
}
],
“大小”：[
{  
“Id”：“3”，
“属性名称”：“大小”，
“属性值”：“5.6”
},
{  
“Id”：“4”，
“属性名称”：“大小”，
“属性值”：“5.1”
}
]
};
var select=$（''）；
$。每个（数据、功能（g、颜色）{
变量组=$（''，{label:g}）；
$.each（颜色、功能（i、颜色）{
var选项=$（''{
值：color.Attrib_值，
文本：color.Attrib_值
});
选择.append（组.append（选项））；
});
});
$（“#下拉列表”）.append（选择）