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.


Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Jeff

    While I don’t know of another way to get the array of selected option texts, you can get an array of the selected values by just getting $(‘#multiplelistbox’).val().

  • Aman

    i am not getting ehich i want

    • And unfortunately with the changes from attr() to prop() in the new jquery 1.6 and upwards, you probably won’t ever get exactly what you want with this particular snipper :( Check out the blog on jquery.com for more information. (and don’t listen to their lies of making it backwards compatible with 1.6.1 – it isn’t fully backwards compatible any more)

  • Aman

    Hi Craig Lotteri want get all selected items in listbox jquery

    • Question is still a bit vague. The above code snippet should give you what you want surely?

  • Thanks for the nice piece of code. It greatly helped me develop the functionality I required. I tried a lot of googling but your solution was the best.

  • Shamalig

    Hi yes this does work. but I wanted this to use this to remove all selected values from the lsit box.

    $(‘#selected :selected’).each(function(i, selected) {
                    $(“#selected option[value='”+ $(selected).val() +”‘]”).remove();

    This works for all except the last value in the list box. The alert functions do work but the remove function doesn’t. can you please help me with this problem


    • Shamalig

      sorry about the question.  There is a way to  remove all selected items.  didn’t see that earlier

  • Danfun

    Good Job.. thanks a lot.. it worked well..