Reading multiple SELECT values with JavaScript/jQuery

Question

I understand that SELECT multiple will let a viewer select multiple items in a dropdown list and then the form submission passes all the selected items. But how does this work in JavaScript when there is no form submission and you're just watching for a select change:

$('#delete_dropdown').change(function(e){

and then looking at $(e.target).val() for the selected values?

Thanks

PSL · Accepted Answer · 2013-10-12 03:39:17Z

1

You can look at this context inside your handler and val() will return the array of elements, with jquery you can do this:

   $('#delete_dropdown').change(function(e){
        var selectedArray = $(this).val();  //Array of selected values
   });

Fiddle

If you are going with vanilla javascript you will need to loop through the options to check which all are selected and add them to suit yourself.

answered Oct 12, 2013 at 3:39

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

Steve Over a year ago

That's beautiful! Thanks. I'm fine with jQuery so I can do the array thing. One thing I notice about your jsfiddle (I added a few more options so it's up to jsfiddle.net/Z6KWr/2 now) is that you get called every click (natually, since it's a "change" handler) but is there some clue when they're finally finished with their selection?

PSL Over a year ago

@Steve yes you are right, change event gets triggered when its value is changed, so every selection /unselection triggers change. You can't assure that when they're finally finished with their selection, because selection/deselection can trigger change, so you would have to manually check that in the change handler if the array length is equal to the length of options then all are selected.

Collectives™ on Stack Overflow

Reading multiple SELECT values with JavaScript/jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related