Tag Archives: multiple select

jQuery and AJAX: How To Send All Selected Values from a Multiple Select Box CodeUnit 28 JUN 2010

Multi-select boxes are wonderful creatures in that they provide a particularly easy to implement user interface element that provides a great deal of functionality to the end user. Today’s quick code tip looks at how one would send all user’s selections made in a multiple select box to a processing script using a jQuery AJAX call.

First off, let us set up our multi select box:

Right. So now we have our multiple select box and a button on which to act upon. The next step is of course the meat of this quick code tutorial, looking at how to post that selected data along to a handler script using a jQuery AJAX call.

So here goes:

//run on save numbers button clicked
    //only do something if numbers are selected
    if( $('#multiselect :selected').length > 0){
        //build an array of selected values
        var selectednumbers = [];
        $('#multiselect :selected').each(function(i, selected) {
            selectednumbers[i] = $(selected).val();
        //post data to handler script. note the JSON.stringify call
            url: 'my_handler_script.php',
            data: {'selectednumbers':JSON.stringify(selectednumbers)},
            type: 'POST',
            success: function(data) {

The trick here is to remember that you can’t simply call .val() on the select box as that will only return one value and not all selected values. So we first run through the list of all selected values (returned by the handy :selected jQuery selector) and push them into a single data array.

Using the JSON2 library to return a usable JSON string of that array, we then make use of jQuery’s built in AJAX functionality to post our data off to our handler script.

And that’s it, couldn’t be simpler – we have now managed to successfully send off an array of all selected values in a multiple select box to our handler script for consumption! :)

jQuery: Get all Selected Values or Text from a Multiple Select Listbox CodeUnit 01 MAR 2010

Grabbing all the selected values or even text values from a multiple select listbox turns out to be quite simple if you know which tools to use.

The idea here is pretty simple. First we declare an array to hold our gleaned variables. Then we need to grab all the selected items in the listbox by making use of the :selected jQuery selector. Next we 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.

Translating this all to jQuery code, we get this:

var realvalues = [];
var textvalues = [];
$('#multiplelistbox :selected').each(function(i, selected) {
    realvalues[i] = $(selected).val();
    textvalues[i] = $(selected).text();

And that’s pretty much it. If you check out the two arrays we just created then you’ll see we are now in possession of all selected values, as well as the selected list items’ display text.


jQuery: Select all options in a Multiple Select Listbox Programming 26 FEB 2010

Sometimes it is nice to present a multiple select listbox to a user with everything already selected.

Handy if you’re using listboxes as filter controls, and something that is, as per usual, quite easy to do using the magic that is the jQuery javascript library.

Essentially what the aim of the game here is to set the selected option in each of the multiple select listbox’s <option> entries.  In order to do this, we will once again make use of jQuery’s nifty prop() function and apply this to the result of our clever little jQuery selector call, which will hone in on our desired select listbox using its ID value and then extending that result to only include all option entries.

So the resulting call would look something like this:

$("#multipleselect option").prop("selected",true);

And there you go. A multiple select listbox with everything already selected for you!