Javascript循环遍历所有HTML选择<option> </option>

Question

我很惊讶我在网上找不到这个代码！

如何访问选择列表中的所有选定索引？不只是第一个？

HTML：

<select name="trends[]" multiple="multiple" id="trends" size="35"></select>

JS：

function moveSelectedTrends()
{
     var selectedTrends = document.getElementById('trends');

     for(var i=0; i < selectedTrends.length; i++)
     {
       alert(selectedTrends.options[selectedTrends.selectedIndex].value) //ONLY returns the first selected element!
     }
}

Answer 1

使用i代替selectedTrends.selectedIndex，并测试它是selected。

   function moveSelectedTrends() {
     var trends = document.getElementById('trends'), trend, i;

     for(i = 0; i < trends.length; i++) {
       trend = trends[i];
       if (trend.selected) {
           alert(trend.value);
       }
     }
   }

Answer 2

避免循环的一种简单方法是QSA：

[].forEach.call(  document.querySelectorAll('#trends :checked')  , function(elm){
    alert(elm.value);
})

：选中的选择器足够聪明，可以用于＆lt;选择＆gt;菜单...