Get value of selected option from drop down using jquery.

Question

I have a problem when I get the values of Selected options.

Let me explain I have a list of options :

<select>
   <option value='1'>Option1</option>
   <option value='2'>Option2</option>
   <option value='3'>Option3</option>
   <option value='4'>Option4</option>
   <option value='5'>Option5</option>
</select>

I get the values and I inserts them into a variable for each Selected option and I put them in an array like this :

$("select option:selected").each(function()
{
      var listValO = new Array();
      var idOption = $("select option:selected").val();
  listValO.push(idOption);
 });

If I choose only one selected option, it works but when I select several options at the same time, the each () function inserts in the array the same value for the number of selected options.

when I click on the submit button, the array contains listValO several times the same value.

<select>
   <option selected value='1'>Option1</option>
   <option selected value='2'>Option2</option>
   <option selected value='3'>Option3</option>
   <option>Option4</option>
   <option>Option5</option>
</select>

listValO returns just 3 times [1,1,1]. In fact, it seleted the first which I clicked or I want in my array [1,2,3].

Sorry for English mistakes if any. I hope you understand my problem and thank you for your future response.

You have to set attribute `multiple` for SELECT element in order to be able to select multiple options at once, then use @Satpal's suggestion which will return an array — A. Wolff, Apr 23 '14 at 10:38
possible duplicate of [jQuery get specific option tag text](http://stackoverflow.com/questions/196684/jquery-get-specific-option-tag-text) — Jorge Y. C. Rodriguez, Apr 23 '14 at 10:40
see http://jsfiddle.net/arunpjohny/SXr8t/2/ | http://jsfiddle.net/arunpjohny/SXr8t/1/ — Arun P Johny, Apr 23 '14 at 10:44

score 3 · Accepted Answer · answered Apr 23 '14 at 10:44

As well as the other answers (using multiple attribute, and using $(this)), you are re-declaring the array for each occurrence of a selected option. Try declaring it outside:

var listValO = new Array();

$("select option:selected").each(function()
{
      var idOption = $(this).val();
      listValO.push(idOption);
});

CodingIntrigue · Answer 2 · 2014-04-23T10:45:07.430

Firstly, you need to add the multiple attribute to the select so you can select multiple options. Second, you're redeclaring a new array inside the each callback, so at the end you'll only ever have one option.

You should use .val() instead:

Markup:

<select multiple>
   <option selected value='1'>Option1</option>
   <option selected value='2'>Option2</option>
   <option selected value='3'>Option3</option>
   <option>Option4</option>
   <option>Option5</option>
</select>

Javascript:

var optionsArray = $("select").val();

Milind Anantwar · Answer 3 · 2014-04-23T10:47:26.170

You need to add attribute multiple in select to select multiple value:

 <select multiple="multiple">
   <option selected value='1'>Option1</option>
   <option selected value='2'>Option2</option>
   <option selected value='3'>Option3</option>
   <option>Option4</option>
   <option>Option5</option>
 </select>

Js code: You are iterating over the selected options, you should rather iterate over to select itself to ensure that selected options are added to array once only.

var listValO = new Array();
$("select").each(function()
{
listValO.push($(this).val());
});
//console.log(listValO) for test purpose

Working Demo

Get value of selected option from drop down using jquery.

3 Answers3