Getting values of a multiple allowed select

Question

HTML:

<select multiple="" name="selectinputmultiple" id="">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

jQuery:

$('select[name=selectinputmultiple]').on('change', function() {
    console.log(this.value);
});

Console just shows the first selected value, I want to save values in an array on each change. So for example:

If a user selected 1 and 2 => {1,2}
Then the user unselected 1 and selected 3 => {2,3}

score 2 · Answer 1 · answered Nov 13 '14 at 05:25

Use map() to get the all selected values in array

$('select[name=selectinputmultiple]').on('change', function () {  
    var val=$('select[name=selectinputmultiple] option:selected').map(function () {
            return this.value;
    }).get();
    console.log(val)
});

DEMO

score 1 · Accepted Answer · answered Nov 13 '14 at 05:21

You can use .val() which should give an array

$('select[name=selectinputmultiple]').on('change', function() {
  $('#log').html(JSON.stringify($(this).val()))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="" name="selectinputmultiple" id="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<div id="log"></div>

Milind Anantwar · Answer 3 · 2014-11-13T05:29:27.177

1

As per .val() doc

In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present.

You can simply use:

var values = $('[name="selectinputmultiple"]').val();

edited Nov 13 '14 at 05:29

answered Nov 13 '14 at 05:21

Milind Anantwar

81,290
25
94
125

score -1 · Answer 4 · answered Nov 13 '14 at 05:22

-1

This should deinately work,

 $('select[name=selectinputmultiple]').on('change', function() {
   $('select[name=selectinputmultiple]').each(function() {
     console.log($(this).val());
     alert($(this).val());
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple="" name="selectinputmultiple" id="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

answered Nov 13 '14 at 05:22

Dimag Kharab

4,439
1
24
45

How come -1 ??? when it is giving perfect output ?? – Dimag Kharab Nov 13 '14 at 05:24
Hah, someone is giving -1 to everyone elses answers. – eozzy Nov 13 '14 at 05:28
@nimbuz gosh WHY ? even tghough giving correct output people doing like this ! – Dimag Kharab Nov 13 '14 at 05:30

score -1 · Answer 5 · answered Nov 13 '14 at 05:23

-1

Try this:

<select multiple="" name="selectinputmultiple" id="">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

$('select[name=selectinputmultiple]').on('change', function() {
    $('select[name=selectinputmultiple]').each(function() {
       console.log($(this).val());
     });  
});

Look at this JSFiddle

answered Nov 13 '14 at 05:23

Captain Planet

408
3
19

-1! What is the reason? – Captain Planet Nov 13 '14 at 05:26

Getting values of a multiple allowed select

5 Answers5

DEMO