Over a million developers have joined DZone.

Easy Multi Select Transfer with jQuery

DZone's Guide to

Easy Multi Select Transfer with jQuery

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!


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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}