javascript - 如何使用 JavaScript 创建具有动态数据的多个选择框？

Question

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

var variations = [{
        NameValueList: [
            { Name: "Color", Value: ["Cloud White / Core Black"] },
            { Name: "US Shoe Size (Women's)", Value: ["11"] },
        ]
    },
    {
        NameValueList: [
            { Name: "Color", Value: ["Cloud White / Core Green"] },
            { Name: "US Shoe Size (Women's)", Value: ["13"] },
        ]
    },
    {
        NameValueList: [
            { Name: "Color", Value: ["Cloud White / Core White"] },
            { Name: "US Shoe Size (Women's)", Value: ["15"] },
        ]
    },
]


document.getElementById("generateVariations").addEventListener("click", () => {
    var html;
    variations.map(el => {
        html = el.NameValueList.map(nameValue => {
            return `<select name="${nameValue.Name}">
                     <option value="${nameValue.Value[0]}">${nameValue.Value[0]}</option>
                  </select>`
        })
    })

    document.getElementById("variations2").innerHTML = html.join('')

})

<div id="variations2"></div>
<button id="generateVariations">Generate variations</button>

Answer 1

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

var variations = [{
    NameValueList: [{
        Name: "Color",
        Value: ["Cloud White / Core Black"]
      },
      {
        Name: "US Shoe Size (Women's)",
        Value: ["11"]
      },
    ]
  },
  {
    NameValueList: [{
        Name: "Color",
        Value: ["Cloud White / Core Green"]
      },
      {
        Name: "US Shoe Size (Women's)",
        Value: ["13"]
      },
    ]
  },
  {
    NameValueList: [{
        Name: "Color",
        Value: ["Cloud White / Core White"]
      },
      {
        Name: "US Shoe Size (Women's)",
        Value: ["15"]
      },
    ]
  },
]

let colors = variations.map(v => v.NameValueList[0]);
let sizes = variations.map(v => v.NameValueList[1])

document.getElementById("generateVariations").addEventListener("click", () => {
  var colors_select = `<select name="${colors[0].Name}">
${colors.map(e=>{
return `<option value="${e.Value[0]}">${e.Value[0]}</option>`
}).join()}
                  </select>`
  var sizes_select = `<select name="${sizes[0].Name}">
${sizes.map(e=>{
return `<option value="${e.Value[0]}">${e.Value[0]}</option>`
}).join()}
                  </select>`

  document.getElementById("variations2").innerHTML = colors_select + sizes_select;

})

<div id="variations2"></div>
<button id="generateVariations">Generate variations</button>