jQuery: Get all Selected Values or Text from a Multiple Select Listbox

Mar
1stjQuery: Get all Selected Values or Text from a Multiple Select Listbox

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.

Simple.
Share this:
Email
Print
Digg
LinkedIn
Tumblr
Post Categories: CodeUnit
Tags: jQuery, listbox, multiple select, retrieve, text, tutorial, value
‹ The House of C 013: Leet Mad SkillzOptimize Your Javascript by Minifying with Google’s Closure Compiler ›

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
- http://www.craiglotter.co.za Craig Lotter
  
  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
- http://www.craiglotter.co.za Craig Lotter
  
  Question is still a bit vague. The above code snippet should give you what you want surely?
http://hemantarora.com Hemant Arora

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.
Cheers!
- http://www.craiglotter.co.za Craig Lotter
  
  Cool, glad it helped you out.
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) {
                 alert($(selected).val());
                alert($(selected).text());

                $(“#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

Regards
- 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..

jQuery: Select all options in a Multiple Select Listbox
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 ...
jQuery: Get the Text for a Currently Selected List Option instead of the Option Value
If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animati ...
jQuery and AJAX: How To Send All Selected Values from a Multiple Select Box
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 j ...
jQuery: Change the Selected Index of a Dropdown List
To change the selected value, or selected index if you will, of a dropdown list using jQuery is not particularly difficult. The classic method to achieve this is to simply set the dropdown's value to a value already contained in the list using val(). (Of course this does require that the specified value is actua ...
How to Set the Selected Index of a Dropdown using jQuery
There are a number of ways to set the selected index of a dropdown list when it comes to jQuery, though unfortunately one of them only works about half the time, basically whenever the guys behind the library remember to fix a particular bug in the system for that particular release. However, these two methods b ...

Rugged Rock StudioThe Musings of Craig Lotter

Mar
1stjQuery: Get all Selected Values or Text from a Multiple Select Listbox

Related Posts:

Rugged Rock StudioThe Musings of Craig Lotter

Mar1stjQuery: Get all Selected Values or Text from a Multiple Select Listbox

Share this:

Related Posts:

Mar
1stjQuery: Get all Selected Values or Text from a Multiple Select Listbox