如何修复下拉框onchange事件仅打印“1”、无法输出各选中值的问题

问题原因 #

代码中的value变量仅在页面初始化阶段赋值一次，存储的是下拉框默认选中的首个选项值1，后续onchange事件触发时没有重新读取当前选中的下拉值，因此每次打印的都是固定的初始值。

修复方案 #

将获取下拉框选中值的逻辑移动到onchange回调函数内部，每次触发下拉变化时重新读取当前值即可，修复后代码如下：

var select = document.getElementById("numOfPieces"); 
var options = ["1", "2", "3", "4", "5"]; 

for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

// 打印初始化默认值
console.log(select.options[select.selectedIndex].value);

select.onchange = function() {
  // 每次change事件触发时重新获取当前选中值
  console.log(select.options[select.selectedIndex].value);
  // 也可以简化为 console.log(this.value)，this指向当前触发事件的select元素
} 

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