如何使用JavaScript在多选select输入框中预设选中多个选项

你的问题出在使用selectedIndex来设置选中项——这个属性只能控制单个选项的选中状态，每次赋值都会覆盖之前的选中结果，所以最后只能保留一个选中项。想要在多选select里同时选中多个选项，应该直接给对应<option>元素设置selected属性为true。

修正后的代码 #

var item = document.getElementById("idResourceName");
ResourcesArr.forEach(function(r) {
  // 遍历select下的所有选项
  for(var j = 0; j < item.options.length; j++) {
    var option = item.options[j];
    // 匹配到目标值时设置选中
    if(option.value === r) {
      option.selected = true;
      break; // 找到匹配项后跳出循环，避免不必要的遍历
    }
  }
});

额外修正点 #

1. 原代码里的windows.alert是拼写错误，应该是window.alert
2. 循环里的item.options[i]逻辑错误，i是当前遍历的option元素，不是索引，正确的应该用item.options[j]获取对应索引的选项

原理说明 #

在开启multiple的select中，每个<option>的选中状态是独立的。直接设置option.selected = true不会影响其他选项的选中状态，因此可以同时选中多个匹配数组值的选项。而selectedIndex本质是控制整个select的"当前选中索引"，在多选场景下只会保留最后一次设置的单个选项，无法实现多选中效果。

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