jQuery multivalue selector

Question

Do you know of any good way/plugin to do this with jquery or any description on how to approach this effectively.

Simple layout of multi value selector

score 1 · Accepted Answer · answered Feb 10 '11 at 21:17

1

This seems like what you're looking for:

"Easy Multi-Select Transfer with jQuery"

http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html

Quick snippet, assumes you have two select lists ID'd #select 1 and #select2, as well as two buttons with IDs #add and #remove.

 $().ready(function() {  
     $('#add').click(function() {  
        return !$('#select1 option:selected').remove().appendTo('#select2');  
     });  
     $('#remove').click(function() {  
        return !$('#select2 option:selected').remove().appendTo('#select1');  
     });  
 });

answered Feb 10 '11 at 21:17

aendra

5,286
3
38
57

Adding the first link that you removed, that I liked better http://www.codedigest.com/CodeDigest/90-How-to-Add--Remove-ListItems-from-one-ListBox-to-Another-Using-JQuery-.aspx – Andreas Feb 10 '11 at 21:36
That snippet is geared towards ASP sites. I wasn't sure what language you were using, so tried to be as language-agnostic as possible. Cool if that works for you, though. – aendra Feb 10 '11 at 21:54

score 0 · Answer 2 · answered Feb 11 '11 at 17:04

This is how i ended up doing it

Multiple.Move = function (from, to)
{
    $('#' + from + ' option:selected').remove().appendTo('#' + to);
}

And some html for the buttons and the select.

<select multiple="multiple" id="available">
    <option value="1">BMW</option>  
    <option value="1">Volvo</option>  
    <option value="1">Audi</option>  
    <option value="1">Saab</option>
</select>  
<input type="button" value="Add" onclick="Multiple.Move('available', 'selected')" />
<input type="button" value="Remove" onclick="Multiple.Move('selected', 'available')" />
<select multiple="multiple" id="available">
</select>

jQuery multivalue selector

2 Answers2