HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="arrary.js"></script>
</head>
<body>
<label>
所在地
</label>
<select size="1" οnchange="sheng(this)" id="sheng01">
<option>请选择省份</option>
<option class="s1">江苏省</option>
<option class="s1">安徽省</option>
<option class="s1">山东省</option>
</select>
<select id="shi01" οnchange="sh(this)">
<option size="1">请选择市</option>
</select>
<select id="qu01">
<option size="1">请选择区</option>
</select>
</body>
</html>
JS代码
//先随便定几个省市区
var sq=new Array();
sq[0] = new Array("江苏省","南京市","苏州市","无锡市","南通市")
sq[1] = new Array("安徽省","合肥","an","an")
sq[2] = new Array("山东省","shan1","shan2")
var sq01=new Array();
sq01[0]=new Array("南京市","江宁","秦淮","雨花台");
sq01[1]=new Array("无锡市","江阴","惠山","滨湖");
function sheng(s){//省的改变事件
/*var sh=s.getElementsByClassName("s1");
//alert(sh.length);
for (var i = 0; i < sh.length; i++) {
sh[i].innerHTML=sq[i][0];
//console.log(sq[i][0]);
}*/
var sh=document.getElementById('shi01').getElementsByTagName("option");//清空市下面的op
//console.log(sh.length);
var ch=sh.length;
for (var i = 1; i <ch; i++) {
//console.log(sh[i].value);
document.getElementById('shi01').removeChild(sh[1]);
//console.log("1");
}
var sh01=document.getElementById('qu01').getElementsByTagName("option");//清空市下面的op
//console.log(sh.length);
var ch=sh01.length;
for (var i = 1; i <ch; i++) {
//console.log(sh[i].value);
document.getElementById('qu01').removeChild(sh01[1]);
//console.log("1");
}
shi();//根据选择的省创建市的op
}
function shi(){//创建市op的函数
var s=document.getElementById('shi01');
var d01=document.getElementById('sheng01');
//console.log(d01.value);
for (var i = 0; i < sq.length; i++) {
if(sq[i][0]==d01.value){
for (var j = 1; j < sq[i].length; j++) {
var op=document.createElement("option");
var tx=document.createTextNode(sq[i][j]);
op.appendChild(tx);
s.appendChild(op);
//console.log(sq[i][j]);
//sh[j-1].innerHTML=sq[i][j];
}
}
}
}
function sh(){//市的改变事件
var sh=document.getElementById('qu01').getElementsByTagName("option");//删除区的op
//console.log(sh.length);
var ch=sh.length;
for (var i = 1; i <ch; i++) {
//console.log(sh[i].value);
document.getElementById('qu01').removeChild(sh[1]);
//console.log("1");
}
qu();//创建区的op
}
function qu(){//创建区的op
var s=document.getElementById('qu01');
var d01=document.getElementById('shi01');
console.log(d01.value);
for (var i = 0; i < sq01.length; i++) {
if(sq01[i][0]==d01.value){
for (var j = 1; j < sq01[i].length; j++) {
var op=document.createElement("option");
var tx=document.createTextNode(sq01[i][j]);
op.appendChild(tx);
s.appendChild(op);
//console.log(sq[i][j]);
//sh[j-1].innerHTML=sq[i][j];
}
}
}
}