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

我有兩個下拉串列，第二個取決于第一個。我不知道如何為 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>

uj5u.com熱心網友回復：

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

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

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

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

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

作業示例：（option我在第二個中添加了一個禁用，select以便您可以選擇第一個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>

標籤：javascript html 下拉式菜单

上一篇：Css檔案未在React專案中使用ExpressJS后端加載

下一篇：無法在Laravel中設定cookie