如何使用 JavaScript 生成動態 select 框？

Question

我將創建一個簡單的電子商務應用程序。 我有 API 調用，它返回變體 object，如下所示。 我想動態生成變化框。 現在我收到一個選項值，我想收到像我提到的圖像這樣的選項值。 此外，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

感謝您回答我的問題，這是我可以提出的解決方案。

首先，我們需要使用reduce() function 重構variations對象數組，以便我們可以輕松地在下一步循環。 我們也可以為此使用 1 個循環，但它會很混亂，所以我認為我們需要單獨進行，至少這樣會減少混亂。

所以我們想把它重建成這樣：

[
  "Color": ["Cloud White / Core Black", "Cloud White / Core Black", "Cloud White / Core Black"].
  "US Shoe Size (Women's)": ["11", "13", "15"]
]

然后現在我們可以循環新重建的對象數組並使用.join('')方法將其轉換為字符串，並將其呈現在div元素上。

 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", () => { // Reconstruct array of object to easier manage rendering of elements const new_variations = variations.reduce((a, b) => { // If property already exist in variable "a", push values, else, create one b.NameValueList.forEach(obj => { let found_variant // Finds an existing object based on the 'name' property and initialize it on the 'found_variant' variable if (found_variant = a.find(e => e.name === obj.Name)) { found_variant.options.push(obj.Value[0]); } else { a.push({ name: obj.Name, options: [obj.Value[0]] }); } }) return a }, []) // Loop using the new reconstructed array of objects to render const html = new_variations.map(obj => (` <label>${obj.name}</label> <select name="${obj.name}"> ${obj.options.map(option => `<option value="${option}">${option}</option>`).join('')} </select> `)).join('') document.getElementById("variations2").innerHTML = html })

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

Answer 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"] }, ] }, ] const selectObjects = (variations) => { return variations.reduce((a, { NameValueList: c }) => { c.forEach(({ Name, Value }) => { if (typeof a[Name] === "undefined") a[Name] = [] a[Name] = [...a[Name], ...Value] }) return a }, {}) } const selectHtml = (name, values) => { let html = '' html += `<label>${name}<select id="${name}">` values.forEach(value => { html += `<option>${ value }</option>` }) html += '</select></label>' return html } const selectsHtml = (selectObjects) => { html = '' for (let key in selectObjects) { html += selectHtml(key, selectObjects[key]) } return html } const container = document.getElementById('container') container.innerHTML = selectsHtml(selectObjects(variations))

 <div id="container"> </div>