Over a million developers have joined DZone.

Easy Multi Select Transfer with jQuery

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

I'm sure that at some point or another you've encountered a form widget like the one below, allowing options to be traded from one multi select to another.

add >>

I recently encountered a tutorial over at Quirks Mode on creating such a widget. While not a bad script, when all was said and done it was coming up on 40 lines of JS. I suppose that's not horrible, but we're talking about some simple functionality.

This struck me as a perfect example to demonstrate the simple and compact nature of jQuery coding. The widget operating above is running off of the following code:

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

That's it... 8 lines.

You can also try it out for yourself with the following test page:

<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');

<style type="text/css">
a {
display: block;
border: 1px solid #aaa;
text-decoration: none;
background-color: #fafafa;
color: #123456;
margin: 2px;
div {
text-align: center;
margin: 10px;
select {
width: 100px;
height: 80px;

<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>
<a href="#" id="add">add >></a>
<select multiple id="select2"></select>
<a href="#" id="remove"><< remove</a>

Since the purpose of this widget is usually to collect all the elements in the second multi select, you can use the following snippet to automatically select all of the options before submitting.

$('form').submit(function() {
$('#select2 option').each(function(i) {
$(this).attr("selected", "selected");

Just make sure you include that snippet inside the $().ready() handler.

Thanks for viewing and I hope you found this helpful! Feel free to use and modify without constraint.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Jeremy Martin. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}