如何在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>