<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*分析：
* 1创建html检点
* 2利用for循环便利出每一个数组
* （1）if判断所有的省市(省市是用arr[i][2]
* 表示的是索引为2等于等于0的数全部便利出来)，
* 把省市判断出来后
* (2)用一个变量把省市中的省全部显示出来
* （变量要是全局变量不然访问不到）
* （3）并赋给省市的下拉框
* 3(1)给省市添加一个onchange改变时内容触发
* (2)便利出所有数组
* （3）在数组中判断省市的value值是否等于等于
* 它对应的arr[i][2]的值
* 注：要提前在上一个城市里获取value
* （4）再在里面用一个变量接收option标签
* （5） 在外面用城市的innerhtml写入标签内
* （6）方便进入下拉框
* 4获取城市的onchange内容改变时触发事件
* 同上
*
* */
window.onload=function(){
var arr=[
[1,'陕西省',0],
[2,'山西省',0],
[3,'山东省',0],
[4,'四川省',0],
[5,'陕西市1',1],
[6,'陕西市2',1],
[7,'陕西市3',1],
[8,'陕西市4',1],
[9,'山西市1',2],
[10,'山西市2',2],
[11,'山西市3',2],
[12,'山东市1',3],
[13,'山东市2',3],
[14,'陕西县1',5],
[15,'陕西县2',5],
[16,'陕西县3',5],
[17,'陕西县4',5]
]
var shengfen=document.getElementById('shengfen');
var chengshi=document.getElementById('chengshi');
var quxian=document.getElementById('quxian')
// var str='';
var str='<option>--请选择省份--</option>'//加了不影响撒的是多了一行
for (var i=0;i<arr.length;i++) {
if (arr[i][2]==0) {
//获取option中的文字显示在下拉框中，但前提是要用城市下拉框接收
str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>'
}
}
shengfen.innerHTML=str;
shengfen.onchange=function(){
quxian.innerHTML='<option>--请选择曲线--</option>'//区分一下
//表示把上一个清空了，代码是从上往下执行会把上面原有的覆盖掉
str='<option>--请选择城市--</option>'
for (var i=0;i<arr.length;i++) {
if (shengfen.value==arr[i][2]) {
str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>'
}
}
//给城市添加内容城市
chengshi.innerHTML=str;
}
chengshi.onchange=function(){
str='<option>--请选择区县--</option>'
for (var i=0;i<arr.length;i++) {
if (chengshi.value==arr[i][2]) {//判断之前先给chengshi添加value值使value==后面子代的值
str+='<option>'+arr[i][1]+'</option>'
}
}
quxian.innerHTML=str;
}
}
</script>
</head>
<body>
省份：
<select name="" id="shengfen">
<option value="">--请选择省份--</option>
</select>
城市：
<select name="" id="chengshi">
<option value="">--请选择城市--</option>
</select>
区县：
<select name="" id="quxian">
<option value="">--请选择区县--</option>
</select>
</body>
