1.1 案例五：下拉列表的左右选择：1.1.1 需求:

传统的JS的方式进行实现:window.onload=function(){// 添加到右侧:document.getElementById("addRight").onclick = function(){// 获得左侧的下拉列表var selectLeft = document.getElementById("selectLeft");// 遍历左侧列表中的所有的option元素.for(var i = selectLeft.options.length - 1;i>=0;i--){// 判断该元素是否被选中if(selectLeft.options[i].selected == true){document.getElementById("selectRight").appendChild(selectLeft.options[i]);}}}// 全部到右侧:document.getElementById("addAll").onclick = function(){// 获得左侧的下拉列表var selectLeft = document.getElementById("selectLeft");// 遍历左侧列表中的所有的option元素.for(var i = selectLeft.options.length - 1;i>=0;i--){document.getElementById("selectRight").appendChild(selectLeft.options[i]);}}}使用JQ完成下拉列表左右选择:$(function(){// 添加左侧选中的元素到右侧$("#addRight").click(function(){// 获得左侧被选中的option元素:$("#selectLeft option:selected").appendTo("#selectRight");});// 添加所有到右侧$("#addAll").click(function(){// 获得左侧被选中的option元素:$("#selectLeft option").appendTo("#selectRight");});// 移除右侧被选中元素到左侧:$("#removeLeft").click(function(){$("#selectRight option:selected").appendTo("#selectLeft");});// 移除右侧被选中元素到左侧:$("#removeAll").click(function(){$("#selectRight option").appendTo("#selectLeft");});// 双击左侧的的某个元素，移动到右侧:$("#selectLeft").dblclick(function(){$("option:selected",this).appendTo("#selectRight");});// 双击左侧的的某个元素，移动到右侧:$("#selectRight").dblclick(function(){$("option:selected",this).appendTo("#selectLeft");});});

1.1.4 总结:1.1.4.1 JQuery常用事件：

• toggle(); --单击事件的切换
• hover(); --鼠标悬停的切换