附件连接下载地址：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>