javascript - Vanilla JavaScript + 多选 - 在多选中获得相同的值？

Question

为什么当您按住 ctl 键进行多选时，我们总是得到相同的多选值和索引？

document.querySelector('select').addEventListener('change', function(e) {
  console.log(this.selectedIndex)
  console.log(e.target.value)
})

<select name="books[]" multiple>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

当您从自上而下 中多次选择选项时会发生这种情况。我希望它获得新的值(value)和索引，但不一样。如果您从自下而上进行操作，那是可以的。

当您自上而下选择多个选项时，我们如何获得“预期”值和索引？

Answer 1

根据 The select element

选择。 selectedIndex [ = value ]

Returns the index of the first selected item, if any, or −1 if there is no selected item. Can be set, to change the selection.

从上面可以看出，术语第一个选择的项目表示可以有多个选择的项目，但它只会返回第一个索引。