How to get values on selected multiple dropdown using Javascript?

Question

I can only get the last selected value on my select multiple dropdown.

I have tried answers on the forum but no luck.

My HTML:

<select id="provider" class="validate" multiple required>
  <option value="" disabled>Invoice Provider Name</option>
  <option>Provider 1</option>
  <option>Provider 2</option>
</select>

My JS:

function addRow(){
  var x=document.getElementById("provider");
  var pro = '';
  for (var i = 0; i < x.options.length; i++) {
    if(x.options[i].selected ==true){
      pro = x.options[i].length.value;
    }
  }
}

assuming that I selected Provider 1, Provider 2 on the dropdown, I want to get

Provider 1
Provider 2

Thank you.

Please add the HTML select element as well. As for your problem, pro is a 'string' type variable. It can store only one value which gets over written. — Krishna Prashatt
– Krishna Prashatt, Commented Aug 6, 2019 at 4:55

Mamun · Accepted Answer · 2019-08-06 08:53:30Z

2

You can try with Array.prototype.filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

And Array.prototype.map():

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Try the following way:

document.getElementById('provider').addEventListener('change', function(){
  console.clear();
  let selected = [...this.options].filter(option => option.selected).map(o => o.value);
  console.log(selected);
});

<select id="provider" class="validate" multiple required>
  <option value="" disabled>Invoice Provider Name</option>
  <option>Provider 1</option>
  <option>Provider 2</option>
</select>

In your way by declaring an array and pushing option's value to the array if selected:

function addRow(el){
  var x = el;
  var pro = []; // create an array
  for (var i = 0; i < x.options.length; i++) {
    if(x.options[i].selected == true){
      pro.push(x.options[i].value); // push the value to the array
    }
  }
  console.log(pro);
}

<select id="provider" class="validate" multiple required onchange="addRow(this)">
    <option value="" disabled>Invoice Provider Name</option>
    <option>Provider 1</option>
    <option>Provider 2</option>
</select>

edited Aug 6, 2019 at 8:53

answered Aug 6, 2019 at 4:59

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

RJ Villamer Over a year ago

I wanna get specific select multiple dropdown via ID. Is this possible with your code?

Krishna Prashatt Over a year ago

Instead of using document.querySelector('select'), you can use document.querySelector('#provider')

Mamun Over a year ago

@RJVillamer, like the previous comment from Krishna Prashatt, updated the answer, please check:)

Ari Seyhun Over a year ago

I suggest changing query selector to getElementById as it's much faster. And changing o.text to o.value

Ari Seyhun Over a year ago

:) I would upvote again if I could. I would also recomment not using this in that function. Instead I would change it to .addEventListener('change', ev => { const sel = ev.target; ...

|

Collectives™ on Stack Overflow

How to get values on selected multiple dropdown using Javascript?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related