Switch options between lists

You might have seen before on websites where you have two or more dropdown lists where you can switch the options between the dropdowns. This tutorial will cover the little code required to get this basic but usefull trick to work.

jQuery

$(function(){
$("#switchAdmin").click(function(){
$("#adminDropDown option:selected").remove().appendTo("#userDropDown");
});
$("#switchUser").click(function(){
$("#userDropDown option:selected").remove().appendTo("#adminDropDown");
});
});

Actually if you've read any previous tutorial about jQuery, everything above is familiar.

$("#adminDropDown option:selected")

This will get the option that is currently selected in the dropdown #adminDropDown.

.remove().appendTo("#userDropDown")

This will remove the selected option (<option></option>) from the current dropdown and add it to the

drop down with an id of #userDropDown.

HTML

<select id="adminDropDown">
<option>Edit Pages</option>
......
</select><input type="button" id="switchAdmin" value="Visible to users" /><br /><br />
<select id="userDropDown">
<option>Homepage</option>
......
</select><input type="button" id="switchUser" value="Visible to admin" />

http://tutcenter.net/tutorialFiles/listSwitch/