|
Moving data between two ListBoxes - Difference between jQuery 1.3.2 and jQuery 1.4
|
|
Rating: 9 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 2/4/2010,
in category "ASP.NET MVC"
Views: this article has been read 21655 times
Abstract: The following article demonstrates the benefit in using jQuery 1.4 over 1.3.2 when you need to move data between two select elements.
Moving data between two ListBoxes - Difference between jQuery 1.3.2 and jQuery 1.4
Recently a new version of jQuery was released. This version is 1.4. As with any new version, ultimately you see what used to take you several lines of code, now rolled up into a single line of code. I'm going to demonstrate a question I've been asked many times on forums and that is how to move selected items from one<select> element to another. I'll show you how you could do it using jQuery 1.3.2 and how to minimize the code by using the new 1.4 library. Before we begin, the new version can be found here.
The HTML
The HTML for this is pretty straight forward. It's simply two <select> elements side by side with two buttons between them. Here's what it looks like:
<form method="get">
<select id="SelectLeft" multiple="multiple">
<option value="1">Australia</option>
<option value="2">New Zealand</option>
<option value="3">Canada</option>
<option value="4">USA</option>
<option value="5">France</option>
</select>
<input id="MoveRight" type="button" value=" >> " />
<input id="MoveLeft" type="button" value=" << " />
<select id="SelectRight" multiple="multiple">
</select>
</form>
jQuery 1.3.2
Below is the code to move the selected items from each <select> element.
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#MoveRight,#MoveLeft").click(function(event) {
var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
var selectedItems = $(selectFrom + "option:selected");
var output = [];
$.each(selectedItems, function(key, e) {
output.push('<option value="' + e.value + '">' + e.text + '</option>');
});
$(moveTo).append(output.join(""));
selectedItems.remove();
});
});
</script>
I've bound one event handler for the button clicks. To decide which direction the selected items should go, I'm using the ID of the button that fired the event:
var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
Next I create an empty array and loop through every selected item and add it to the end of the array:
var output = [];
$.each(selectedItems, function(key, e) {
output.push('<option value="' + e.value + '">' + e.text + '</option>');
});
Then I append it to the end of the <select> element and remove the moved items:
$(moveTo).append(output.join(""));
selectedItems.remove();
Overall I think that's a good approach. In jQuery 1.4 we can make this better!
jQuery 1.4
In the new jQuery library, the team has introduced a new function called toArray. This retrieves all the DOM elements contained in the jQuery set, as an array. So here's the code below:
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#MoveRight,#MoveLeft").click(function(event) {
var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
var selectedItems = $(selectFrom + " :selected").toArray();
$(moveTo).append(selectedItems);
selectedItems.remove;
});
});
</script>
The first thing you'll notice is the code has been reduced. Thanks to the toArray function, I have eliminated the need to loop through the selected items. Now they're returned as an array:
var selectedItems = $(selectFrom + " :selected").toArray();
And to add them to the <select> element, I no longer need to use the join function, I simply append them:
$(moveTo).append(selectedItems);
Nice and simple! The entire source code of this article can be downloaded over here
If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email
Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.