附件连接下载地址：http://files.cnblogs.com/files/CaktyRiven/js.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="" id="province">
<option value="">请选择省</option>
</select>
<select name="" id="city">
<option value="">请选择市</option>
</select>
<select name="" id="county">
<option value="">请选择区/县</option>
</select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
//获取省、市、县/区、节点
var body = document.body;
var province =document.getElementById(‘province‘);
var city = document.getElementById(‘city‘);
var county = document.getElementById("county");
//将chain.js里面的字符串通过JSON转换成对象
var chinaArea = JSON.parse(chinaArea);
//通过点访问法访问对象，将结果赋给定义好的省列表
var provinceList =chinaArea.china.province;
//for循环遍历省份列表长度
for(var i = 0; i < provinceList.length; i++) {
//新建option节点
var option = document.createElement("option");
//将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。
option.innerHTML = provinceList[i]["-name"];
//将option添加到province 的select下拉列表里
province.appendChild(option);
}
//定义城市列表为空
var cityList=null;
//利用onchang方法获取下拉列表中的对象
province.onchange=function(){
//清空城市/区县列表
city.innerHTML ="<option>请选择市</option>";
county.innerHTML="<option>请选择区/县</option>";
//通过this.selectedIndex获取select列表的下标
if(this.selectedIndex >0){
//同理，通过点访问法和中括号访问法访问对象，将获取的城市赋给cityList
cityList = chinaArea.china.province[this.selectedIndex -1].city;
//同理、遍历城市列表的长度、新建option、赋值、并添加
for(var i=0; i<cityList.length; i++){
var option = document.createElement("option");
option.innerHTML = cityList[i]["-name"];
city.appendChild(option);
}
}
}
//县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值
city.onchange = function(){
county.innerHTML="<option>请选择区/县</option>";
if(this.selectedIndex >0){
for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){
var option = document.createElement("option");
option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];
county.appendChild(option);
}
}
// console.log(cityList[this.selectedIndex -1]);
}
</script>
</body>
</html>
时间： 2025-01-12 02:25:10