Getting the selected values in a multiselect tag in Javascript

Question

I have the following code

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);
}

This works right, but as you can see from the code this line:

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

Is doing a deselecting of the value.

Now, I do not want to deselect the values. If I uncomment that line in the code, the code will run forever.

Is there any more refined and sophisticated solution for retrieving multiple values from a select tag using Javascript?

score 45 · Accepted Answer · edited Apr 17 '19 at 12:00

Wouldn't this do it:

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 example

@Adam Leggett's Update for 2018 is incredibly simple and works great — schwartz721, Jun 03 '20 at 21:26

score 9 · Answer 2 · answered Feb 01 '18 at 21:49

Update for 2018:

If the <select> element contains a selectedOptions property, use that collection. The only browser still in wide circulation that doesn't support this is IE (any version). Edge does support it.
If this is not supported, the answer by @j08691 is still correct, but as a performance optimization you can start iterating options at selectedIndex instead of 0. This is the index of the first selected option, or -1 if nothing is selected.

Ray Toal · Answer 3 · 2019-12-31T00:31:32.447

4

Another approach for those who like a more functional style:

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

or

selections = Array.from(selectBox.selectedOptions).map(o => o.value)

edited Dec 31 '19 at 00:31

answered Dec 30 '19 at 22:28

Ray Toal

86,166
18
182
232

I'm using `Object.values` instead of `Array.from`. Not sure if there's a difference though. – Jules Colle Jun 19 '20 at 12:38

Getting the selected values in a multiselect tag in Javascript

3 Answers3

Linked