Steve Fenton
Author of The Reason Your Website Sucks

<< February | March | April >>

Tuesday, 23rd March 2010

I received a really good question today about the jQuery Two Sided Multi-Selector and I thought I'd share the answer just in case anyone else wants to do something similar.

How Do I Get The Currently "Selected" items?

It's really easy to get the current selected items from a Two Sided Multi-Selector. For example, if you have this multi-select list:

<select name="yourselect" class="multiselect" size="6" multiple="true">

You can use the following jQuery to get all of the current selected options:

var selectedOptions = $("#yourselect")[0].options;

Note that the id "#yourselect" corresponds to the original name attribute.

Further Detail

You can't get the current items using:

$("#selectID").val();

This is because the Two Sided Multi-Selector behaves in a special way. When you select an item, it gets added to the right-hand box. You can then select items in the right-hand box and move them back, or move more items from the left-hand box into the right-hand box. This results in the actual "selected" items (highlighted by the browser) not being the entire list. This is handled by the plugin when the submit button is pressed as all items in the right-hand box get selected before the form is posted back to the server. If you want to get the values at any other time you'll need to bear in mind this behaviour and use the example at the top of the page to get all selected items.

The live demo of this has been updated to include this example code and you can get to the live demo through the jQuery Two-Sided Multi-Select documentation page.