你的位置:首页 > Java教程

[Java教程]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);        }        }        // console.log(cityList[this.selectedIndex -1]);               } </script></body></html>