<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0 0;}
div{margin:100px auto;
width:300px;}
</style>
</head>
<body>
<div>
<form>
<select name="sele" id="sheng">
<option value="">请选择省会</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="sele" id="shi">
<option value="">请选择城市</option>
</select>
<select name="sele" id="qu">
<option value="">请选择地区</option>
</select>
</form>
<script type="text/javascript">
var myAdd=[0,
[
10,
[101,102,103],
20,
[201,202,203],
30,
[301,302,303],
],
1,
[
11,
[111,112,113],
12,
[121,122,123],
13,
[131,132,133],
],
2,
[
21,
[211,212,213],
22,
[221,222,223],
23,
[231,232,233],
],
];
console.log(myAdd);
// console.log(myAdd[0]);
// console.log(myAdd[2]);
// console.log(myAdd[4]);
//console.log(myAdd[1].length);
// console.log(myAdd[1][0]);
// console.log(myAdd[1][2]);
// console.log(myAdd[1][4]);
//
// console.log(myAdd[3][0]);
// console.log(myAdd[3][2]);
// console.log(myAdd[3][4]);
//
// console.log(myAdd[5][0]);
// console.log(myAdd[5][2]);
// console.log(myAdd[5][4]);
// console.log(myAdd[1][1][0]);
// console.log(myAdd[1][1][1]);
// console.log(myAdd[1][1][2]);
// console.log(myAdd[1][3][0]);
// console.log(myAdd[1][3][1]);
// console.log(myAdd[1][3][2]);
// console.log(myAdd[1][5][0]);
// console.log(myAdd[1][5][1]);
// console.log(myAdd[1][5][2]);
// console.log(myAdd[3][1][0]);
// console.log(myAdd[3][1][1]);
// console.log(myAdd[3][1][2]);
// console.log(myAdd[3][3][0]);
// console.log(myAdd[3][3][1]);
// console.log(myAdd[3][3][2]);
// console.log(myAdd[3][5][0]);
// console.log(myAdd[3][5][1]);
// console.log(myAdd[3][5][2]);
// console.log(myAdd[5][1][0]);
// console.log(myAdd[5][1][1]);
// console.log(myAdd[5][1][2]);
// console.log(myAdd[5][3][0]);
// console.log(myAdd[5][3][1]);
// console.log(myAdd[5][3][2]);
// console.log(myAdd[5][5][0]);
// console.log(myAdd[5][5][1]);
// console.log(myAdd[5][5][2]);
window.onload=function()
{
function getarea(id){
return document.getElementById(id);
}
var sheng=getarea('sheng');
var shi=getarea('shi');
var qu=getarea('qu');
sheng.onchange=function(){
//console.log(myAdd.length);
for(var i=0;i<myAdd.length;i+=2){
if(myAdd[i]==this.value){
printShi(i);
printQu(i,1);
}
//console.log(i);
}
}
shi.onchange=function(){
for(var i=0;i<myAdd.length;i+=2){
for(var j=0;j<myAdd.length;j+=2){
if(myAdd[i+1][j]==this.value)
printQu(i,j+1);
//console.log(myAdd[i+1][j]);
}
}
}
function printShi(i){
shi.innerHTML='<option value="'+myAdd[i+1][0]+'">'+myAdd[i+1][0]+'</option>';
// console.log('<option value="'+myAdd[i][0]+'">'+myAdd[i][0]+'</option>');
//console.log(myAdd[i+1]);
for(var j=2,len=myAdd[i+1].length;j<len;j+=2){
var shioption=document.createElement("option");
shioption.setAttribute('value',myAdd[i+1][j]);
shioption.innerHTML=myAdd[i+1][j];
shi.appendChild(shioption);
}
}
function printQu(i,y){
qu.innerHTML='<option value="'+myAdd[i+1][y][0]+'">'+myAdd[i+1][y][0]+'</option>';
console.log(myAdd[i+1].length);
j=i+1;
for(var m=1,len=3;m<len;m++){
var quoption=document.createElement("option");
quoption.setAttribute('value',myAdd[j][y][m]);
quoption.innerHTML=myAdd[j][y][m];
qu.appendChild(quoption);
}
}
}
</script>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
