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.

Answer 1

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

Answer 2

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

Answer 3

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