JavaScript 三级联动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

附件连接下载地址：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);
}
}
} </script>
</body>
</html

2017.05.02 -- 新增，js+jquery，省市区三级联动，封装函数

<!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="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript">
//将chain.js里面的字符串通过JSON转换成对象
var chinaArea = JSON.parse(chinaArea);
console.log(chinaArea);
//通过点访问法访问对象，将结果赋给定义好的省列表
var provinceList =chinaArea.china.province; function address(piv,cit,coy){
//获取省、市、县/区、节点
var province =$(piv);
var city = $(cit);
var county = $(coy);
//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.appendTo(option);
province.append(option); }
//定义城市列表为空
var cityList =null;
//利用onchang方法获取下拉列表中的对象
province.change(function(){
//清空城市/区县列表
city.html ("<option>请选择市</option>");
county.html("<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.append(option);
}
}
})
//县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值
city.change(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.append(option);
}
}
})
}
address(province,city,county);
</script>
</body>
</html>