JavaScript从数组生成option时如何设置与文本不同的value属性

实现了两级联动下拉选择列表，第二个下拉的选项根据第一个下拉的选中值动态生成，目前无法给动态创建的option元素的value属性设置和显示文本不同的独立取值。
当前代码运行后，option的textContent显示文本和value属性值完全一致，需要实现value和显示文本独立配置，比如选项显示文本为Inhabitants时，可以给它设置专属的value值。
原有实现代码如下：

原有JS代码 #

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);

原有HTML代码 #

<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>

问题根源是原有数据源用纯字符串数组存储选项，只能保存显示文本，没有预留value值的存储位置，按以下步骤修改即可：

• 重构数据源结构：把每个分类下的选项从纯字符串改成对象结构，每个对象同时保存text（显示文本）和value（绑定的专属值）两个字段
• 移除原代码中未定义的mvalue变量引用，避免运行报错
• 遍历生成option时，分别给value和textContent赋值对象中对应的字段，不再强制两个值相等
• 补全HTML中缺失的第二个下拉框（原代码中查询select[name='itemSelect']会返回null，直接报错）
• 去掉冗余的clone+替换节点逻辑，直接清空第二个下拉框的原有选项再追加新选项即可，性能更好也不会丢失节点事件

修改后可运行代码 #

数据源部分 #

// 用对象存储每个选项的显示文本和独立value，可按需自定义value值
var moduly = {};
moduly['1'] = [
  {text: "Inhabitants", value: "demo_001"},
  {text: "Married", value: "demo_002"}
];
moduly['2'] = [
  {text: "German", value: "nation_001"},
  {text: "French", value: "nation_002"},
  {text: "English", value: "nation_003"}
];
moduly['3'] = [
  {text: "Houses", value: "prop_001"},
  {text: "Estates", value: "prop_002"}
];
moduly['4'] = [
  {text: "Surface area", value: "area_001"},
  {text: "Meadow area", value: "area_002"}
];

联动逻辑部分 #

document.querySelector("select[name='modulSelect']").addEventListener("change", function() {
  const selectKey = this.value.toString().toLowerCase();
  const currentOptions = moduly[selectKey];
  if (!currentOptions) return;

  const itemSelect = document.querySelector("select[name='itemSelect']");
  // 清空原有选项
  itemSelect.innerHTML = '';

  // 添加默认提示项
  const defaultOpt = document.createElement("option");
  defaultOpt.value = 0;
  defaultOpt.disabled = true;
  defaultOpt.selected = true;
  defaultOpt.textContent = "Choose module";
  itemSelect.appendChild(defaultOpt);

  // 生成动态选项
  currentOptions.forEach(function(optionItem) {
    const opt = document.createElement("option");
    // 分别赋值独立的value和显示文本
    opt.value = optionItem.value;
    opt.textContent = optionItem.text;
    itemSelect.appendChild(opt);
  });
}, false);

HTML部分 #

<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>
  <!-- 补全第二个下拉框 -->
  <select name="itemSelect">
    <option value="0" disabled selected>Choose module</option>
  </select>
</form>

后续如果需要调整某个选项的显示文本或value值，直接修改moduly中对应对象的属性即可，不需要改动联动逻辑。

内容的提问来源于stack exchange，提问作者jenik2205