Easy Multi Select Transfer with jQuery
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.
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:
<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 >></a>
</div>
<div>
<select multiple id="select2"></select>
<a href="#" id="remove"><< remove</a>
</div>
</body>
</html>
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.
- Login or register to post comments
- 5381 reads
- Flag as offensive
- Email this Story
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Rick Ross replied on Fri, 2008/03/07 - 3:32pm
Very cool technique, Jeremy! Thanks for sharing this at DZone. We may incorporate something like this into our upcoming redesign.
Rick
Jeremy Martin replied on Fri, 2008/03/07 - 3:35pm
Jason Huck replied on Sat, 2008/03/08 - 1:15pm
Oddly enough, I just posted about the same thing this morning:
http://www.dzone.com/links/combo_select_boxes_in_jquery.html
Mostly subtle differences between the two implementations, with the exception that I integrated the Selso plugin to keep both lists sorted as changes are made. I believe this greatly improves the usability of the control, especially when the lists are very long. You can see a demo here:
http://devblog.jasonhuck.com/assets/comboselect/
- jason
Jeremy Martin replied on Sat, 2008/03/08 - 2:36pm
in response to: easykill