三级联动
//原生实现三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市切换</title>
</head>
<body>
<select id="province"></select>
<select id="city"></select>
<select id="region"></select>
<script type="text/javascript">
var oProv = document.getElementById("province");
var oCity = document.getElementById("city");
var oRegion = document.getElementById("region");
var arr1 = [
{"id":"1","name":"北京"},
{"id":"2","name":"山西"},
{"id":"3","name":"陕西"},
];
var str1 = "<option>----请输入省份----</option>";
for(var i=0;i<arr1.length;i++){
str1 += '<option value='+arr1[i].id+'>'+arr1[i].name+'</option>';
}
oProv.innerHTML = str1;
var city = {
"1":["101#北京"],
"2":["201#太原","202#临汾","203#运城"],
"3":["301#西安","302#华阴","303#宝鸡"]
};
oProv.onchange = function(){
var val = this.value;
var cityArr = city[val];
var str2 = '<option>----请输入市------</option>';
if(oProv.value != "----请输入省份----"){
for(var i=0;i<cityArr.length;i++){
var citySp = cityArr[i].split("#");
str2 += '<option value='+citySp[0]+'>'+citySp[1]+'</option>';
};
oCity.innerHTML = str2;
}else{
oCity.innerHTML = "";
oRegion.innerHTML = "";
}
}
var region = {
"101":["昌平区","朝阳区","海淀区"],
"201":["清徐县","小店区","长风区"],
"202":["尧都区","霍州市","侯马市"],
"203":["夏县","闻喜县","河津市"],
"301":["长安区","雁塔区","高新区"],
"302":["华山","万象街","太华路"],
"303":["太白山","陈仓县","千阳县"]
};
oCity.onchange = function(){
var val1 = this.value;
var regArr = region[val1];
var str3 = '<option>----请输入区------</option>';
if(oCity.value !="----请输入市------"){
for(var i=0;i<regArr.length;i++){
str3 += '<option>'+regArr[i]+'</option>';
}
oRegion.innerHTML = str3;
}else{
oCity.innerHTML = "";
oRegion.innerHTML = "";
}
}
</script>
</body>
</html>
