jQuery实现下拉框左右移动（全部移动，已选移动）

用到的方法为：appendTo（）
格式：$（content）.appendTo（selector）
appendTo（）方法在被选元素的结尾（仍然在内部）插入指定内容。
click（）方法触发 click 事件，或规定当发生 click 事件时运行的函数。
看一下具体实现的代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="js/jquery-1.6.1.min.js" type="text/javascript"></script><script type="text/javascript">$（function （） {$（"#add"）.click（function （） {//1,方式一//var $option = $（"#select1 option:selected"）;//获取选中的选项//var $remove = $option.remove（）; //删除下拉列表中选中的选项//$remove.appendTo（"#select2"）;//追加给对方//2，方式二var $option = $（"#select1 option:selected"）;//获取选中的选项$option.appendTo（"#select2"）;//追加给对方}）;$（"#add_all"）.click（function （） {var $option = $（"#select1 option"）;$option.appendTo（"#select2"）;}）;$（"#remove"）.click（function （） {var $option = $（"#select2 option:selected"）;$option.appendTo（"#select1"）;}）;$（"#remove_all"）.click（function （） {var $option = $（"#select2 option"）;$option.appendTo（"#select1"）;}）;}）;</script></head><body><h3>下拉框应用</h3><table><tr><td><select id="select1" multiple="multiple" style="width:100px;"><option value="News">News</option><option value="Sport">Sport</option><option value="Education">Education</option><option value="Technology">Technology</option><option value="Art">Art</option></select></td><td><button id="add">>|</button><br /><button id="add_all">>></button><br /><button id="remove_all"><<</button><br /><button id="remove">|<</button></td><td><select id="select2" multiple="multiple" style="width:100px;"></select></td></tr></table></body></html>

运行效果：