2017-07-21
JavaScipt
1：城市二级联动
（1）：js代码
//通过ID获取省份和城市
var por = document.getElementById("x1");
var city = document.getElementById("x2");
//创建存放省份和城市的数组，空一个是让当选者“请选择省份”的时候不跳出值
var arrCity = [[], ["临夏", "兰州", "天水", "武威"], ["武汉", "襄阳", "宜昌", "黄石"], ["长沙", "株洲", "湘潭", "衡阳"], ["石家庄", "唐山", "邯郸", "沧州"]];
var arrPor = ["甘肃省", "湖北省", "湖南省", "河北省"];
//通过遍历数组把省份值放进select标签中
onload = function() {
for(i = 0; i < arrPor.length; i++) {
var op1= document.createElement("option");
op1.innerHTML=arrPor[i];
por.appendChild(op1);
}
}
//当por值发生改变时，执行一次
por.onchange=function(){
//下拉列表下标从0开始，保留一个长度和从一开始不一样
city.length = 1;
//获得por的第一个 获得你选中的下拉列表框的下标
var index = por.selectedIndex;
//获得对应的城市
var citys = arrCity[index];
//循环获取每一个城市
for(var i = 0; i < citys.length; i++) {
//创建一个option
var op = document.createElement("option");
//放一个城市
op.innerHTML = citys[i];
//option放入select
city.appendChild(op);
}
}
（2）html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="x1">
<option>请选择省</option>
</select>
<select id="x2">
<option>请选择市</option>
</select>
<script type="text/javascript" src="作业.js"></script>
</body>
</html>