21

So I have a MultiSelect box with x values which I need the ability to move to another MultiSelect box and vise versa.

<select class="boxa" multiple="multiple"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select class="boxb" multiple="multiple"> </select>

Need to move all or one of the values of boxa to boxb on a button click, also with the ability to move the values back from boxb to boxa.

Does jQuery have anything like this or is this a custom snippet of code?

Improve this question

9 Answers 9

Reset to default
75 
$().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This should be the accepted answer -- works perfectly with no plugin required.
What is the return and the ! for?
@alonso.torres that is for returning false, from blog.jeremymartin.name/2008/02/…: To prevent the page from scrolling to the top whenever a user clicks a button (in some browsers), I added return false; to the click event handlers.
10

Try the following (taken from http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html)

<html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); }); </script> <style type="text/css"> a { display: block; border: 1px solid #aaa; text-decoration: none; background-color: #fafafa; color: #123456; margin: 2px; clear:both; } div { float:left; text-align: center; margin: 10px; } select { width: 100px; height: 80px; } </style> </head> <body> <div> <select multiple id="select1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <a href="#" id="add">add &gt;&gt;</a> </div> <div> <select multiple id="select2"></select> <a href="#" id="remove">&lt;&lt; remove</a> </div> </body> </html>
Improve this answer

1 Comment

Very simple solution. This is exactly what I was looking for. Thanks, Silas!
9

I had same problem but i found out a way around it 

<div> <select multiple id="select1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> </div> <div> <select multiple id="select2"></select> </div>

jquery

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

if want a button add a add >> and jquery click selector here

example http://jsfiddle.net/diffintact/GJJQw/3/

Improve this answer

1 Comment

This looks like a copy of Yashita's answer
5

There's a jquery plugin called crossSelect which seems to do what you want.

jQuery doesn't have this built in, you would need to either find a plugin you like and use that, or write your own. (And of course you don't have to use jQuery to write or use it, you could implement it in pure javascript if you like)

Improve this answer

1 Comment

Aforementioned link is dead now.
4 
$('#boxa option').appendTo('#boxb');
Improve this answer

Comments

2

If you are fine with plugin, this plugin does work well.

http://crlcu.github.io/multiselect/#home

Improve this answer

Comments

1

If you want a one time selection and form submission quick solution to add and remove options between two selects on click.

$(document).on('click', '.onclickaddto', function(e){ var to = $(this).attr('data-to'); $(this).find('option:selected').remove().appendTo($(to)); });
.multiselect{ width: 98%; height: 100px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display:flex;"> <div style="width:50%;"> <h2>Enabled countries</h2> <select name="allowed_countries[]" class="onclickaddto multiselect" data-to="#available_countries" id="allowed_countries" multiple=""></select> </div> <div style="width:50%"> <h2>Available countries</h2> <select class="onclickaddto multiselect" id="available_countries" data-to="#allowed_countries" multiple=""> <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AD">Andorra</option> </select> </div> </div>

Improve this answer

Comments

0

Here goes my html code

<div> <select multiple id="select1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select> <a href="#" id="add">add &gt; &gt;</a> </div> <div> <select multiple id="select2"></select> <a href="#" id="remove">remove &lt; &lt;</a> </div>

and Javascript code

$("#add").click(function(){ $("#select1 option:selected").remove().appendTo($("#select2")); }) $("#remove").click(function(){ $("#select2 option:selected").remove().appendTo($("#select1")); })

Make sure you imported jquery.js file.

Improve this answer

Comments

0

If using Bootstrap, I found bootstrap-duallistbox quite handy.

  • Filterable
  • Responsive
  • Localizable
  • Highly customizable
  • Seems well maintained
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.