Javascript loop through ALL HTML select

Question

I'm surprised I can't find this code online!

How do I access ALL the selected indices of a select list? Not just the first one?

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!
     }
}

See also https://stackoverflow.com/questions/2950152/iterate-through-select-options?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — rogerdpack, Apr 26 '18 at 04:42

score 22 · Answer 1 · answered Jan 24 '14 at 21:58

22

Use i instead of selectedTrends.selectedIndex and test if it is 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);
       }
     }
   }

answered Jan 24 '14 at 21:58

Quentin

914,110
126
1,211
1,335

4

Unfortunately, doesn't work for very large datasets. – Mark Kennedy Jan 27 '14 at 19:14

dandavis · Accepted Answer · 2014-01-24T22:13:22.697

16

one simple way to avoid loops is to QSA:

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

the :checked selector is smart enough to work on < select > menus...

edited Jan 24 '14 at 22:13

answered Jan 24 '14 at 22:08

dandavis

16,370
5
40
36

Javascript loop through ALL HTML select

2 Answers2

Linked