JavaWeb04-HTML篇笔记（五）

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

在分类的修改的页面中,有某个分类下的所属的商品的信息.可以对这些商品信息进行选择.

1.1.2 分析: 1.1.2.1 技术分析：

【JQuery的选择器】

1.1.3 代码实现:

传统的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常用事件：

1.1.4.2 JQ的事件切换：

* toggle();                --单击事件的切换

* hover();                --鼠标悬停的切换