1.省市联动案例
<tr>
<td>籍贯</td>
<td>
<!--确定事件，通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>
（1）步骤
<1>确定事件（change），在绑定的函数里面获取用户选择的省份、
<2>创建二维数组来存储省份和城市
<3>遍历二维数组中的省份，与用户选择的省份进行比较（使用JQ的遍历操作）
<4>遍历数组中的城市
<5>创建一个文本节点
<6>创建option元素节点
<7>将文本节点添加到元素节点中（使用JQ的文档操作方法）
<8>获取第二下拉列表，将option元素节点添加进入（使用JQ添加操作）
<9>清除第二个下拉列表option内容
（2）重点
<1>JQ的遍历操作
方法一：each（callback）； 链接：http://jquery.cuishifeng.cn/each.html
callback：指的是对于每个匹配的元素所要执行的函数
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用对象访问方式遍历</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用对象访问的方式进行遍历，语法：$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
});
</script>
</head>
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
</body>
</html>
说明：
$("input[name='hobby']")是被遍历的对象（一个集合）
方法二：$.each(object,[callback]) ； 链接：http://jquery.cuishifeng.cn/jQuery.each.html
object:需要遍历的对象或数组。
callback:每个成员/元素执行的回调函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用工具类遍历方式</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 说明：两种遍历方式，掌握其中一种即可，个人觉得此种方式较容易理解!
*/
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
$.each($("input[name='hobby']"), function(i,j) {
j.checked = isChecked;
});
});
});
</script>
</head>
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
</body>
</html>
说明：使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
<2>使用JQ进行文档操作
---append(content):向每个匹配的元素内部追加内容
content:要追加到目标中的内容 链接：http://jquery.cuishifeng.cn/append.html
说明： A.append(B) ：将B追加到A的内容末尾处
---appendTo(content)：
content：用于被追加的内容； 链接：http://jquery.cuishifeng.cn/appendTo.html
说明：A.appendTo(B) ：将A追加到B的内容末尾处
---empty() ：删除匹配的元素集合中所有的子节点。（不会删除标签）
链接：http://jquery.cuishifeng.cn/empty.html
---remove([expr])：从DOM中删除所有匹配的元素。（会删除标签）
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
[expr]：JQ的表达式 链接：http://jquery.cuishifeng.cn/remove.html
JS代码示例：
<script>
$(function () {
//2.创建省市数据二维数组
var cities = new Array(3);
cities[0]=new Array("武汉市","襄阳市","黄冈市","荆州市");
cities[1]=new Array("长沙市","彬州市","株洲市","岳阳市");
cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function () {
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//3.遍历二维数组中的省份
$.each(cities,function (i, n) {
// alert(i+":"+n);
//4.判断是否为用户选择的省份
if(val==i){
//5.遍历用户选择省份下的城市
$.each(cities[i],function (j,m) {
// alert(i+":"+n);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到元素节点
$(opEle).append(textNode);
//9.将option元素节点，添加到第二个下拉列表中
$(opEle).appendTo($("#city"));
})
}
})
})
})
</script>
网友评论