二级动态下拉框取值异常，如何获取选中的实际选项值？

问题场景 #

我实现的三级联动下拉框，选择第一个下拉框后更新第二个，选择第二个后更新第三个。但var pipe_size_value = document.getElementById("pipe_size_HTML").value;总是返回固定字符串"pipe_size_value"，而非选中选项的实际值，所有选项值均来自lookupTable，需要修正这个问题。

问题原因 #

在生成第二个下拉框的选项时，你把选项的value属性硬编码成了字符串"pipe_size_value"，而不是使用lookupTable中对应的管道尺寸key。同样第三个下拉框也存在类似问题，选项value被写死成了"pipe_WT_value"。

修正方案 #

• 在secondSelection函数中，创建Option时，将第二个参数（即选项的value）替换为循环中的key，这样每个选项的value就对应lookupTable里的管道尺寸值。
• 在thirdSelection函数中，创建Option时，将第二个参数替换为element，让第三个下拉框的选项value对应实际的壁厚值。

修正后的完整JavaScript代码 #

var lookupTable = {
  "PVC_Water": {
    "4\"": [
      "DR-14",
      "DR-18",
      "DR-21",
      "DR-25"
    ],
    "6\"": [
      "DR-14",
      "DR-18",
      "DR-21",
      "DR-25"
    ]
  }
};

function secondSelection() {
    // 获取第一个下拉框的选中值
    var pipe_mat_value = document.getElementById("pipe_mat_HTML").value;

    // 获取第二个下拉框的DOM引用
    var pipe_size = document.getElementById("pipe_size_HTML");

    // 清空第二个下拉框现有选项
    pipe_size.innerHTML = "";

    // 添加默认提示选项
    pipe_size.add(new Option("Select an option", "", true, true));

    for (const key in lookupTable[pipe_mat_value]) {
        // 这里把value设置为key，而不是固定字符串
        pipe_size.add(new Option(key, key));
    }
}

function thirdSelection() {
    // 获取第一个和第二个下拉框的选中值
    var pipe_mat_value = document.getElementById("pipe_mat_HTML").value;
    var pipe_size_value = document.getElementById("pipe_size_HTML").value;

    var pipe_WT = document.getElementById("pipe_WT_HTML");

    // 清空第三个下拉框现有选项
    pipe_WT.innerHTML = "";

    // 添加默认提示选项
    pipe_WT.add(new Option("Select an option", "", true, true));

    if (lookupTable[pipe_mat_value] && lookupTable[pipe_mat_value][pipe_size_value]) {
        var WT_array = lookupTable[pipe_mat_value][pipe_size_value];

        WT_array.forEach(function(element) {
            // 这里把value设置为element，而不是固定字符串
            pipe_WT.add(new Option(element, element));
        });
    }
}

额外优化说明 #

我还加了两个小优化：

1. 每次清空下拉框后，重新添加了默认的提示选项（"Select an option"），保持交互一致性。
2. 在thirdSelection里加了判断，避免当选中值不存在于lookupTable时出现报错。

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