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];
}
}
}
}