JavaScript中打印select元素下一个选项值的问题排查

嘿，我完全懂你碰到的这个小坑！咱们来拆解下问题出在哪儿：

你的代码里用了select.selectedIndex++，这是后置自增运算符——它的逻辑是先使用当前的selectedIndex值去获取对应的选项，完成取值操作后，再把selectedIndex的值加1。这就导致两个矛盾的结果：

• 因为索引后来被加1了，select元素自动选中了下一个选项
• 但你拿到的value是操作前的当前选项的值，所以打印出来的不是你预期的下一个选项值

修复方案有两种，选哪种都可以： #

方案1：改用前置自增运算符

把selectedIndex++改成++selectedIndex，这样会先把索引加1，再用新的索引去获取选项的值，正好符合你的需求：

var select = document.form.unit; 
var value = select.options[++select.selectedIndex].value; 
document.form.output.value = value;

方案2：手动先更新索引，再取值

如果觉得前置自增有点绕，也可以拆分两步写，逻辑更清晰：

var select = document.form.unit; 
select.selectedIndex++; // 先把索引加1，选中下一个选项
var value = select.options[select.selectedIndex].value; // 再获取新选中的选项值
document.form.output.value = value;

额外小提示 #

别忘了处理边界情况哦！如果当前已经是最后一个选项，selectedIndex++会让索引超出选项数组的范围，这时候可以加个判断让它回到第一个选项：

var select = document.form.unit; 
if (select.selectedIndex === select.options.length - 1) {
  select.selectedIndex = 0;
} else {
  select.selectedIndex++;
}
var value = select.options[select.selectedIndex].value;
document.form.output.value = value;

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