17

我有以下代码

function searchFlights() {
    var select1 = document.getElementById("airports-select-1");
    var selected1 = [];
    while(select1.selectedIndex != -1) {
      if(select1.selectedIndex != 0) selected1.push(select1.options[select1.selectedIndex].value); 
      select1.options[select1.selectedIndex].selected = false;
   }

   console.log(selected1);
}

这工作正常，但正如您从代码中看到的这一行：

select1.options[select1.selectedIndex].selected = false;

正在取消选择该值。

现在，我不想取消选择这些值。如果我在代码中取消注释该行，代码将永远运行。

是否有任何更精致和复杂的解决方案可以使用 Javascript 从选择标签中检索多个值？

4

3 回答 3

45

这不可以吗：

function searchFlights() {
    var select1 = document.getElementById("airports-select-1");
    var selected1 = [];
    for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected) selected1.push(select1.options[i].value);
    }
    console.log(selected1);
}​


function searchFlights() {
    var select1 = document.getElementById("airports-select-1");
    var selected1 = [];
    for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected) selected1.push(select1.options[i].value);
    }
    console.log(selected1);
}
<form method="post">
  <select name="Select1" multiple="multiple" size="8" id="airports-select-1" onblur="searchFlights()" ;>
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
    <option>ddd</option>
    <option>eee</option>
  </select>
</form>

jsFiddle 示例

于 2012-07-20T17:10:31.937 回答
9

2018 年更新：

  • 如果<select>元素包含selectedOptions属性，请使用该集合。唯一仍在广泛流通但不支持此功能的浏览器是 IE（任何版本）。Edge 确实支持它。

  • 如果这不受支持，@j08691 的回答仍然是正确的，但作为性能优化，您可以开始迭代选项selectedIndex而不是0. 这是第一个选择的选项的索引，或者-1如果没有选择任何选项。

于 2018-02-01T21:49:14.770 回答
4

对于那些喜欢更实用风格的人的另一种方法：

selections = Array.from(selectBox.options).filter(o => o.selected).map(o => o.value)

或者

selections = Array.from(selectBox.selectedOptions).map(o => o.value)
于 2019-12-30T22:28:17.530 回答