JQuery_ Novice to Ninja - Earle Castledine [122]
chapter_08/03_select_lists/index.html (excerpt)
…
As stated, the client wants the ability to swap selected items from one list to another. We’ll make a SWAPLIST object that will contain all the functionality we’ll build. This can then be reused anytime we need to play with select elements:
chapter_08/03_select_lists/script.js (excerpt)
var SWAPLIST = {};
SWAPLIST.swap = function(from, to) {
$(from)
.find(':selected')
.appendTo(to);
}
We’ve defined a swap function that accepts selector strings targeting two lists: a source list and a destination list. The first task we want to do is to grab any items that are currently selected. We can do this using the find action with the :selected form filter. This filter will return any form elements that have the attribute selected set. Then we can move the selection over to the destination list with appendTo. Easy! And once we’ve defined this functionality, we can apply it to any two lists by calling our swap method from appropriate click handlers:
chapter_08/03_select_lists/script.js (excerpt)
$('#swapLeft').click(function() {
SWAPLIST.swap('#candidates', '#a-listers');
});
$('#swapRight').click(function() {
SWAPLIST.swap('#a-listers', '#candidates');
});
Now selected items can be swapped back and forth at will! Let’s add some more functionality to our SWAPLIST object. How about swapping all elements? That’s even easier:
chapter_08/03_select_lists/script.js (excerpt)
SWAPLIST.swapAll = function(from,to) {
$(from)
.children()
.appendTo(to);
}
We just take all the child elements (instead of only the selected elements) and append them to the bottom of the destination—the whole list jumps from source list to destination list.
Inverting a Selection
The next client request is to add a button that inverts the current selection, to make it easier for his staff when dealing with large selections. When this link is clicked, all currently selected items in the target list become deselected, and vice versa. Let’s make a function inside the SWAPLIST object that does this:
chapter_08/03_select_lists/script.js (excerpt)
SWAPLIST.invert = function(list) {
$(list)
.children()
.attr('selected', function(i, selected) {
return !selected;
});
}
All we have to do is retrieve every list item and swap its selected attribute. We use the attr function to set our list items to !$(this).attr('selected'). The JavaScript NOT (!) operator (the exclamation mark) inverts the Boolean value, so if the value was true it becomes false, and if it was false it becomes true!
Important: Calling attr with a Function Parameter
This is a great trick: we’ve used the attr action—but it’s not the version we’re used to. Previously we used the attr(key, value) action to set attributes to a static value, but attr also lets us pass in a function to determine the value. The function will be passed two parameters: the index of the element and its current value. The return value of the function becomes the attribute’s new value. For our invert method, we return the opposite of the element’s current selection value—so each element is toggled. We can do this kind of dynamic processing with stacks of commands: text, html, val, addClass, wrap … and many more!
Searching through Lists
After having to listen to the client whine on and on about how hard it is to find the celebrities he’s trying to select, you decide to throw in a little freebie: a quick search feature that lets him type some characters and automatically select any matching elements:
chapter_08/03_select_lists/script.js (excerpt)
SWAPLIST.search = function(list, search) {
$(list)
.children()
.attr('selected', '')
.filter(function() {
if (search == '') {