get multiple values from dropdownlist in JavaScript

Question

How can I get the values selected in the drop-down list, using a JavaScript function? User can select multiple values from both the elements. Following are the elements I'm using. Thanks in advance.

<select name="icOptions" id="icOptions" style="display: none" multiple="multiple">
  <option value="Choose an Option" selected="selected">Choose a Team </option>
  <option value="IDX">IDX</option>
  <option value="Support">SUPPORT</option>
  <option value="webapps">WEBAPPS</option>
</select>

<select name="ocOptions" id="ocOptions" style="display: none" multiple="multiple">
  <option value="Choose an Option" selected="selected">Choose a TeamMember </option>
  <option value="sanjay740">sanjay740</option>
  <option value="milind740">milind740</option>
</select>

Gwyn Howell · Accepted Answer · 2012-04-20 07:28:07Z

13

var fld = document.getElementById('icOptions');
var values = [];
for (var i = 0; i < fld.options.length; i++) {
  if (fld.options[i].selected) {
    values.push(fld.options[i].value);
  }
}
// do something with values

edited Apr 20, 2012 at 7:28

answered Apr 20, 2012 at 7:22

Gwyn Howell

5,4142 gold badges34 silver badges48 bronze badges

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

1 Comment

milind Over a year ago

Thanx it worked with little modification. alert('you selected' + fld.options[i].value); because i wanted selected values. well Thanx again

Tamil · Accepted Answer · 2012-04-20 19:16:40Z

0

Really Awesome Library for your need using jQuery or Prototype http://harvesthq.github.com/chosen/ Have a look at it.

It supports select & multiselect in a really nice way

answered Apr 20, 2012 at 19:16

Tamil

5,3789 gold badges44 silver badges61 bronze badges

Comments

nanobar · Accepted Answer · 2018-08-07 10:12:05Z

0

An ES6/functional style alternative to the accepted answer:

const values = Array.apply(null, e.target.options)
  .filter(option => option.selected)
  .map(option => option.value);

edited Aug 7, 2018 at 10:12

answered Aug 7, 2018 at 9:49

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

1 Comment

Jesse Over a year ago

While this code may answer the question, it's usually better to provide an explanation of why and how this code helps in this case. See How do I write a good answer

Collectives™ on Stack Overflow

get multiple values from dropdownlist in JavaScript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related