如何使用JavaScript创建包含动态数据的多个选择框？

我将创建一个简单的电子商务应用程序。我有一个API调用，它返回的变量对象如下。我想动态生成变体框在本例中，我的目标是生成2个选择框，第一个包含所有颜色选项，第二个包含所有值选项。现在我收到一个选项值，我想收到选项值，就像我提到的图像一样。此外，选择框是动态的，可以有三种以上的变体。我怎样才能达到这个结果？提前谢谢

var变量=[{
名称价值列表：[
{名称：“颜色”，值：[“云白色/核心黑色”]}，
{名称：“美国鞋码（女式）”，值：[“11”]}，
]
},
{
名称价值列表：[
{名称：“颜色”，值：[“云白色/核心绿色”]}，
{名称：“美国鞋码（女式）”，值：[“13”]}，
]
},
{
名称价值列表：[
{名称：“颜色”，值：[“云白/核心白”]}，
{名称：“美国鞋码（女式）”，值：[“15”]}，
]
},
]
document.getElementById（“generateVariations”）.addEventListener（“单击”，（）=>{
var-html；
variations.map（el=>{
html=el.NameValueList.map（nameValue=>{
返回`
${nameValue.Value[0]}
`
})
})
document.getElementById（“variations2”）.innerHTML=html.join（“”）
})

生成变体

我不确定，但我认为这是您想要的

var变量=[{
名称价值列表：[{
名称：“颜色”，
值：[“云白色/核心黑色”]
},
{
名称：“美国鞋码（女式）”，
值：[“11”]
},
]
},
{
名称价值列表：[{
名称：“颜色”，
值：[“云白色/核心绿色”]
},
{
名称：“美国鞋码（女式）”，
值：[“13”]
},
]
},
{
名称价值列表：[{
名称：“颜色”，
值：[“云白色/核心白色”]
},
{
名称：“美国鞋码（女式）”，
值：[“15”]
},
]
},
]
让colors=variations.map（v=>v.NameValueList[0]）；
让size=variations.map（v=>v.NameValueList[1]）
document.getElementById（“generateVariations”）.addEventListener（“单击”，（）=>{
变量颜色\u选择=`
${colors.map（e=>{
返回`${e.Value[0]}`
}).join（）}
`
变量大小\u选择=`
${size.map（e=>{
返回`${e.Value[0]}`
}).join（）}
`
document.getElementById（“variations2”）.innerHTML=colors\u select+size\u select；
})

生成变体