JS级联下拉框显示选项索引而非对应值的代码修复方法

问题现象 #

两级select组成的级联下拉组件，选中第一个下拉框的Ariston选项时，预期第二个下拉框展示a、b、c、d对应选项，实际运行时第二个下拉框显示0、1、2、3的索引序号，异常效果如下：

问题复现代码 #

HTML部分 #

<select id="brand"></select>
<select id="model"></select>

JS部分 #

var brandObject = {
  'Ariston': ["a","b","c","d"],
  'Airpop': ["a","b"],
}

window.onload = function() {
  var brandSel = document.getElementById("brand");
  var modelSel = document.getElementById("model");

  for (var x in brandObject) {
    brandSel.options[brandSel.options.length] = new Option(x, x);
  }

  brandSel.onchange = function() {
    modelSel.length = 1;  // 清空第二个下拉框

    for (var y in brandObject[this.value]) {
      modelSel.options[modelSel.options.length] = new Option(y,y);   
    }
  }    
}

错误原因 #

for...in语法设计用来遍历对象的可枚举属性，遍历数组时返回的是字符串类型的数组下标（即"0"、"1"、"2"、"3"），而非数组存储的实际元素值。原代码遍历型号数组时，直接将遍历拿到的下标作为Option的显示文本和值传入，直接导致第二个下拉框只显示索引序号。

修复方法 #

将遍历型号数组的for...in替换为for...of，直接获取数组元素值即可，修正后的onchange逻辑如下：

brandSel.onchange = function() {
  modelSel.length = 1;  // 清空第二个下拉框
  // 用for...of直接遍历拿到数组元素
  for (var y of brandObject[this.value]) {
    modelSel.options[modelSel.options.length] = new Option(y, y);   
  }
}

如果需要兼容不支持for...of的老旧环境，也可以保留for...in写法，通过下标取到对应数组元素：

brandSel.onchange = function() {
  modelSel.length = 1;
  var modelList = brandObject[this.value];
  for (var y in modelList) {
    // 通过索引取到真实选项值
    modelSel.options[modelSel.options.length] = new Option(modelList[y], modelList[y]);   
  }
}

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