<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区的三级联动</title>
<style type="text/css">
#box{
width: 600px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="box">
<select name="省">
</select>
<select name="市">
</select>
<select name="区">
</select>
</div>
<script src="script.js"></script>
</body>
</html>
var arr = [ //多维数组
"北京",[
"朝阳区",["朝阳1","朝阳2","朝阳3"],
"海淀区",["海淀1","海淀2","海淀3"]
],
"上海",[
"浦东区",["浦东1","浦东2","浦东3"],
"浦西区",["浦西1","浦西2","浦西3"]
],
"山西",[
"吕梁",["吕梁1","吕梁2","吕梁3"],
"晋中",["晋中1","晋中2","晋中3"]
]
]
var box = document.getElementById("box"),
osls = box.getElementsByTagName("select");
for(var i = 0 ; i < arr.length; i++ ){
if(typeof arr[i] == "string"){
/*var op = document.createElement("option");
op.value = arr[i];
op.innerHTML = arr[i];
osls[0].appendChild(op);*/
osls[0].add(new Option(arr[i],arr[i]));//参数1---value 参数2 ---innerHTML
}
}
osls[0].onchange = function(e){
// alert(osls[0].value)
for(var i = 0 ; i < arr.length; i++){
if(typeof arr[i] == "string"){
if(osls[0].value == arr[i]){
var brr = arr[i+1];
osls[1].value = null;
osls[1].innerHTML = null;
for(var j = 0 ; j < brr.length; j++){
if(typeof brr[j] == "string"){
osls[1].add(new Option(brr[j],brr[j]));//参数1---value 参数2 ---innerHTML
}
}
}
}
}
}
osls[1].onchange = function(){
// alert(osls[1].value)
for(var i = 0 ; i < arr.length ; i ++){
if(typeof arr[i] != "string"){
var brr = arr[i];
for(var j = 0 ; j < brr.length ; j++){
if(typeof brr[j] == "string"){
if(brr[j] == osls[1].value){
var crr = brr[j+1];
osls[2].innerHTML = null;
for(var k = 0 ; k < crr.length ; k++){
osls[2].add(new Option(crr[k],crr[k]));//参数1---value 参数2 ---innerHTML
}
}
}
}
}
}
}