如何在javascript中將值屬性添加到數組中的選項元素？

Question

我有兩個下拉列表，第二個取決於第一個。 我不知道如何為 node.value （選項元素的值）添加不同的值。

編輯：此時我在 textContent 和 html 選項元素的值中具有相同的值，但我需要從 textContent 添加不同的值。 例如居民

 var moduly = []; moduly['1'] = ["Inhabitants", "Married"]; moduly['2'] = ["German", "French", "English"]; moduly['3'] = ["Houses", "Estates"]; moduly['4'] = ["Surface area", "Meadow area"]; document.querySelector("select[name='modulSelect']").addEventListener("change", function() { var element = moduly[this.value.toString().toLowerCase()]; var elementvalue = mvalue[this.value.toString().toLowerCase()]; if (element) { var select = document.querySelector("select[name='itemSelect']").cloneNode(); var node = document.createElement("option"); node.value = 0; node.setAttribute("disabled", true); node.setAttribute("selected", true); node.textContent = "Choose module"; select.appendChild(node); moduly[this.value.toString().toLowerCase()].forEach(function(element) { var node = document.createElement("option"); node.value = element; node.textContent = element; select.appendChild(node); }); document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']")); } }, false);

 <form> <select id="modulSelect" name="modulSelect"> <option value="1">Demographics</option> <option value="2">Nation</option> <option value="3">Property</option> <option value="4">Area</option> </select> </form>

Answer 1

您正在使用未定義的 var，這會引發錯誤：

var elementvalue = mvalue[this.value.toString().toLowerCase()];

因為也沒有使用 var elementvalue值，所以您可以注釋掉該行或將其刪除。 此外，您嘗試克隆一個名稱為itemSelect的select元素，此示例代碼中不存在該元素。 缺少以下行：

<select id="itemSelect" name="itemSelect"></select>

修復兩個錯誤，您的代碼應該按預期工作。

工作示例：（我在第二個select中添加了一個禁用option ，以便您可以選擇第一個option “人口統計”並將第二個禁用option從“選擇模塊”重命名為“選擇項目”，以便您可以區分兩者）

 var moduly = []; moduly['1'] = ["Inhabitants", "Married"]; moduly['2'] = ["German", "French", "English"]; moduly['3'] = ["Houses", "Estates"]; moduly['4'] = ["Surface area", "Meadow area"]; document.querySelector("select[name='modulSelect']").addEventListener("change", function() { var element = moduly[this.value.toString().toLowerCase()]; //var elementvalue = mvalue[this.value.toString().toLowerCase()]; if (element) { var select = document.querySelector("select[name='itemSelect']").cloneNode(); var node = document.createElement("option"); node.value = 0; node.setAttribute("disabled", true); node.setAttribute("selected", true); node.textContent = "Choose item"; select.appendChild(node); moduly[this.value.toString().toLowerCase()].forEach(function(element) { var node = document.createElement("option"); node.value = element; node.textContent = element; select.appendChild(node); }); document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']")); } }, false);

 <form> <select id="modulSelect" name="modulSelect"> <option value="0" disabled selected>Choose module</option> <option value="1">Demographics</option> <option value="2">Nation</option> <option value="3">Property</option> <option value="4">Area</option> </select> <select id="itemSelect" name="itemSelect"></select> </form>

---

如果您想要不同的值/內容對，您可以將moduly數組嵌套更深一層。 例如從以下位置更改數組：

moduly['3'] = ["Houses", "Estates"];

至

moduly['3'] = [["10", "Houses"], ["11", "Estates"]];

然后你只需要用數組表示法輸出數據：

node.value = element[0];
node.textContent = element[1];

 var moduly = []; moduly['1'] = [["5", "Inhabitants"], ["6", "Married"]]; moduly['2'] = [["7", "German"], ["8", "French"], ["9", "English"]]; moduly['3'] = [["10", "Houses"], ["11", "Estates"]]; moduly['4'] = [["12", "Surface area"], ["13", "Meadow area"]]; document.querySelector("select[name='modulSelect']").addEventListener("change", function() { var element = moduly[this.value.toString().toLowerCase()]; //var elementvalue = mvalue[this.value.toString().toLowerCase()]; if (element) { var select = document.querySelector("select[name='itemSelect']").cloneNode(); var node = document.createElement("option"); node.value = 0; node.setAttribute("disabled", true); node.setAttribute("selected", true); node.textContent = "Choose item"; select.appendChild(node); moduly[this.value.toString().toLowerCase()].forEach(function(element) { var node = document.createElement("option"); node.value = element[0]; node.textContent = element[1]; select.appendChild(node); }); document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']")); } }, false);

 <form> <select id="modulSelect" name="modulSelect"> <option value="0" disabled selected>Choose module</option> <option value="1">Demographics</option> <option value="2">Nation</option> <option value="3">Property</option> <option value="4">Area</option> </select> <select id="itemSelect" name="itemSelect"></select> </form>