Question

为什么当您按住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>

$data

当您从自上而下中选择多个选项时，就会发生这种情况。我希望它会获得新的值和索引，但不一样。从自下而上开始操作就可以了。

当您从上至下选择多个选项时，如何获得“期望”值和索引？

Answer 1

根据The select element

选择。 selectedIndex [=值]

返回 第一个选定项目 的索引（如果有的话）；如果没有选定的项目则返回-1。可以设置，以更改选择。

从上面开始，术语 第一个选定项 表示可以有多个选定项，但只会返回第一个索引。

Answer 2

您应该使用selectedOptions并获取它们的索引值：

document.querySelector('select').addEventListener('change', function(e) {
  for ( var i = 0; i < this.selectedOptions.length; i++) {
    console.log( this.selectedOptions[i].value);
  }
})

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

如果您希望结果从下到上，则只需反转循环即可：

    document.querySelector('select').addEventListener('change', function(e) {
      for ( var i = this.selectedOptions.length - 1; i > -1; i--) {
        console.log( this.selectedOptions[i].value);
      }
    })

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

Answer 3

原因是tree order

selectedIndex IDL属性在获取时必须返回的索引以树顺序排列的选项列表中的第一个选项元素具有如果有的话，其选择度设置为true。如果没有，那就必须返回-1。 Ref

value相同

值IDL属性在获取时必须返回以树顺序排列的选项列表中的第一个选项元素选择性设置为true（如果有）。如果没有，那就必须返回空字符串。 Ref

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

.as-console-wrapper {max-height:100% !important; top:0;}

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

Vanilla JavaScript +多项选择-多项选择获得相同的价值吗？

3 个答案: