Tag Archives: listbox

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.


Remove all Listbox and Dropdown List Items with jQuery CodeUnit 27 FEB 2010

I’ve said it once and I’ll say it a million times over and again, the jQuery javascript library is simply fantastic. Today’s little code snippet is going to look at removing all the options from a select dropdown list or listbox, on the fly and using jQuery.

To get this little trick working, we are going to be making use of the remove() function that allows us to strip the target out of the pages DOM, essentially removing it from view and access.

In order to do this, we will construct a selector that will locate the target list using its ID value and then filter it down to all of its option children. Traversing through each option using the handy each() function, we will then apply a remove() call, essentially dropping that specific option out of the list, and in the end, leaving us with an empty <select> construct. Nice.

So the snippet to do this then would look a little something like this:

$('#selectlist option').each(function(i, option){ $(option).remove(); });

You can probably simplify the above by shortening the call logic and letting jQuery handle all the internals for you, but leaving it in the form that the example is currently in shows you exactly step for step how we are setting about achieving our desired empty state.

Magic I tell you.

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!