How to Get All the Selected Values from a Multi-Select with jQuery

Need to know how to get all the selected values or text values from a multi select element (drop down)? Its simple with jQuery!

Start by declaring an array. One for the values of the multi select element and one for the text values. Well, if you even need the text values from the multi select, that is.

Now we can use the ‘ :selected’ jQuery selector. That we get all the items from the select element that the user has selected. We can use the jQuery ‘each()’ function to iterate over the select element and gather the values and texts into the arrays using jQuery’s standard ‘.val()’ and ‘.text()’ functions.

Next iterate through the selected items, using the standard val() to return the selected option’s value or text() to grab the actual display text that made up the list item.

$document.ready({

var vals = [];
var textvals = [];

function getMultipleSelectVals( id ){
  $( '#' + id + ' :selected' ).each( function( i, selected ) {
      vals[i] = $( selected ).val();
      textvals[i] = $( selected ).text();
  });
}// end function

});//$document.ready