<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="city"></select>
<select id="cityarea"></select>
<select id="street"></select>
<script type="text/javascript">
var city = document.getElementById("city");
var cityarea = document.getElementById("cityarea");
var street = document.getElementById("street");
var that;
var cityInfo = {
"北京":{
"海淀区":{
"海淀街道1":"海淀街道1",
"海淀街道2":"海淀街道2",
"海淀街道3":"海淀街道3"
},
"朝阳区":{
"朝阳街道1":"朝阳街道1",
"朝阳街道2":"朝阳街道2",
"朝阳街道3":"朝阳街道3"
},
"西城区":{
"西城街道1":"西城街道1",
"西城街道2":"西城街道2",
"西城街道3":"西城街道3"
}
},
"上海":{
"浦东区":{
"浦东街道1":"浦东街道1",
"浦东街道2":"浦东街道2",
"浦东街道3":"浦东街道3"
},
"虹桥区":{
"虹桥街道1":"虹桥街道1",
"虹桥街道2":"虹桥街道2",
"虹桥街道3":"虹桥街道3"
},
"徐汇区":{
"徐汇街道1":"徐汇街道1",
"徐汇街道2":"徐汇街道2",
"徐汇街道3":"徐汇街道3"
}
},
"深圳":{
"宝安区":{
"宝安街道1":"宝安街道1",
"宝安街道2":"宝安街道2",
"宝安街道3":"宝安街道3"
},
"福田区":{
"福田街道1":"福田街道1",
"福田街道2":"福田街道2",
"福田街道3":"福田街道3"
},
"南山区":{
"南山街道1":"南山街道1",
"南山街道2":"南山街道2",
"南山街道3":"南山街道3"
}
}
}
for(var cityName in cityInfo){
var cityOpt = document.createElement("option");
cityOpt.innerHTML = cityName;
city.appendChild(cityOpt);
}
city.onchange = function(){
that = this;
cityarea.length = 0;
for(var cityAreaName in cityInfo[this.value]){
var cityAreaOpt = document.createElement("option");
cityAreaOpt.innerHTML = cityAreaName;
cityarea.appendChild(cityAreaOpt);
}
}
cityarea.onchange = function(){
street.length = 0;//把street内容清空
for(var streetName in cityInfo[that.value][this.value]){
var streetOpt = document.createElement("option");
streetOpt.innerHTML = streetName;
street.appendChild(streetOpt);
}
}
</script>
</body>
</html>