<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省/市/区 三级联动练习</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
</style>
</head>
<body>
<form>
<select name="sel" id="sheng">
<option value="">请选择省会</option>
<option value="江西省">江西省</option>
<option value="广东省">广东省</option>
<option value="安徽省">安徽省</option>
</select>
<select name="sel" id="shi">
<option value="">请选择城市</option>
</select>
<select name="sel" id="qu">
<option value="">请选择地区</option>
</select>
</form>
<script>
//window.onload:首先将数据加载出来,显示在页面上;自己理解为将页面有文字的先显示出来
window.onload=function(){
//用这样简单的方法,获取到所有的id;
function getId(id){
return document.getElementById(id);
}
var sheng=getId('sheng');
// alert(sheng.length);return
var shi=getId('shi');
var qu=getId('qu');
var m;
var n;
var p;
var that;
var arr=[
"江西省",
[ "南昌市",
["东湖区","西湖区","青山湖区"],
"景德镇",
["珠江区","西湖区","昌江区"]
],
"广东省",
[
"广州市",["番禺区","天河区","黄埔区"],
"深圳市",["宝安区","龙岗区","福田区"],
"惠州市",["龙门区","惠城区","惠阳区"]
],
"安徽省",
[
"合肥市",["政务区","庐阳区","包河区"],
"芜湖市",["经开区","庐阳区","包河区"],
"黄山市",["高新区","庐阳区","包河区"]
]
]
// console.log(arr)
// console.log(arr[0])//可以取到省 0 2 4
// console.log(arr[1][0])//可以取到市 0 2 4
// console.log(arr[1][1][2])//可以取到区 1 3 5
//onchange 事件会在域的内容改变时发
sheng.onchange=function(){
//that=this就是将当前的this对象复制一份到that变量中;主要用于在下面可以直接调用;和普通的赋值没区别;
that=this;
//将数组遍历;得到的是江西省,广东省,安徽省
for(var i=0;i<arr.length;i+=2){
//判断遍历的结果书否与输出相等;
if(arr[i]==this.value){
m=i;
//将遍历的结果给函数,让其外部调用;
printShi(m);
printQu(m,1)
}
}
}
shi.onchange=function(){
for(var i=0;i<arr.length;i+=2){
if(arr[i]==that.value){
n=i
for(var j=0,len=arr[n+1].length;j<len;j+=2){
if(arr[n+1][j]==this.value){
p=j
printQu(n,p+1)
}
}
}
}
}
//接收到sheng遍历的信息;
function printShi(x){
// // 例如;选中第一个江西省,然后就在是的后面直接添加html格式即可;
// //在初始的页面中,是无法显示出市的信息;因此需要用js加入;
shi.innerHTML="<option value="+arr[x+1][0]+">"+arr[x+1][0]+"</option>";
// //这里是遍历市的长度;
for(var j=2,len=arr[x+1].length;j<len;j+=2){
// //将市列表显示出来
// //createElement() 方法通过指定名称创建一个元素,
var shioption=document.createElement("option")
// //修改value里面的值;setAttribute(选中属性,修改的值)
shioption.setAttribute("value",arr[x+1][j]);
shioption.innerHTML=arr[x+1][j];
// //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
shi.appendChild(shioption);
}
}
//添加区;
function printQu(x,y){
qu.innerHTML="<option value="+arr[x+1][y][0]+">"+arr[x+1][y][0]+"</option>";
for(var j=2,len=arr[x+1][y].length;j<len;j++){
//将市列表显示出来
var quoption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
quoption.setAttribute("value",arr[x+1][y][j])//修改value
quoption.innerHTML=arr[x+1][y][j];
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
qu.appendChild(quoption);
}
}
}
</script>
</body>
</html>
<!-- that=this
例子 $(‘#conten').click(function(){
//this是被点击的#conten
var that = this;
$(‘.conten').each(function(){
//this是.conten循环中当前的对象
//that仍然是刚才被点击的#conten
});
});
不同的位置,this表示的意思不一样,在前面提前将当前的属性赋予给that,
在下面就可以直接调用that,这时的that也就是之前的属性 -->
<!--
两级联动;
获取省id的节点,然后依据id节点创界onchange事件;
用for循环遍历省的数据;
(接着判断遍历的数据与输出的内容是否相等);
然后将遍历的值存放在函数中,让其他函数调用;
创建一个函数;调用的是遍历省的数据;
获取市id的节点;
根据省遍历的数据,在市后面进行html拼接;(这时显示的结果为:选中省,对应的市也就出来了);
接着遍历市;
<创建一个元素(为option);
将里面的输出改为(显示的结果);
将这整个加入到市中><这三步因方法不同而不同 -->总结:
