determining which values were selected in html SELECT control with jQuery

Question

I have the following HTML:

<select id="MySelector" multiple="multiple">
  <option value="2">Option A</option>
  <option value="7">Option B</option>
  <option value="9">Option C</option>
  <option value="12">Option D</option>
</select>

<div id="CheckSelected">click here to select</div>

I'm looking to loop through the options of the select and determine which ones have been selected.

I'm looking to do something like this:

ArrayOfSelected = [];

$('#CheckSelected').click(function {

 "if option is selected then add value to the array"

});

Thanks for your suggestions.

Is this a new array you're creating or do you have an existing array you want to add values to? — Roman
– Roman, Commented Apr 7, 2011 at 19:30

ThiefMaster · Accepted Answer · 2011-04-07 19:22:05Z

6

$('#MySelector').val() gives you an array containing the values of the selected elements.

answered Apr 7, 2011 at 19:22

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

Comments

Mark Coleman · Accepted Answer · 2011-04-07 19:27:15Z

2

something like this should work for you. Find the option:selected and for each one push the value into the array.

$('#CheckSelected').click(function() {
    ArrayOfSelected.length = 0; //empty the array.
    $("#MySelector option:selected").each(function() {
        ArrayOfSelected.push($(this).val());
    });
});

Code example on jsfiddle.

edited Apr 7, 2011 at 19:27

answered Apr 7, 2011 at 19:20

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Comments

Naftali · Accepted Answer · 2011-04-07 19:21:21Z

1

try this:

ArrayOfSelected = [];

$('#CheckSelected').click(function {

   $('#MySelector option:selected').each(function(){
      ArrayOfSelected.push($(this).val());
   })

});

answered Apr 7, 2011 at 19:21

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

sadmicrowave · Accepted Answer · 2011-04-07 22:31:40Z

1

You can do this with live select option box clicks rather than having to select an option then click the "click here to select" div. Do the following:

  var ArrayOfSelected = [];
  $('select#MySelector').change(function(){
      ArrayOfSelected.length = 0;
      ArrayOfSelected.push($(this).val());
      $("#picks").empty().append("<h1>selected: " + ArrayOfSelected + "</h1>");
 });

The .change() function tells the callback function to execute when an option within the specified select input has been changed. So for every option box click, the callback will be executed...

Doing it this way will reduce the number of clicks the user has to do in order to add an option to the array.

update

I tested this in your jsfiddle link and it works the way you are wanting.

edited Apr 7, 2011 at 22:31

answered Apr 7, 2011 at 19:26

sadmicrowave

41k34 gold badges116 silver badges184 bronze badges

Comments

MeLight · Accepted Answer · 2011-04-07 19:28:13Z

-2

You can do it without looping with jQuery:

$('#CheckSelected').click(function() {
    if($('#MySelector').val() == 'your_option') {
        //add to array code
    }
}

edited Apr 7, 2011 at 19:28

answered Apr 7, 2011 at 19:22

MeLight

5,5734 gold badges47 silver badges70 bronze badges

3 Comments

Naftali Over a year ago

this code is kind of useless... where does this if statement go?

sadmicrowave Over a year ago

If this if statement is outside of a loop then what initiates the if to execute? You didn't post enough code to help him out...

MeLight Over a year ago

My bad, you both are right. You don't drink and code. I'll try to remember that tomorrow :D

Collectives™ on Stack Overflow

determining which values were selected in html SELECT control with jQuery

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related