如何使用 JavaScript 創建多個具有動態數據的 select 框？

Question

我將創建一個簡單的電子商務應用程序。 我有 API 調用，它返回變體 object 如下所示。 我想在此示例中動態生成變化框，我的目標是生成 2 個 select 框，第一個包含所有顏色選項，第二個包含所有值選項。 現在我收到一個期權價值，我想收到像 我提到的圖像。 此外，select 盒子是動態的，可以有超過三種變化。 我怎樣才能達到這個結果？ 提前致謝。

 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>