码迷,mamicode.com
首页 > Web开发 > 详细

js中的省市区三级联动

时间:2017-04-15 13:53:00      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:脚本语言   语言   this   hang   ++   行政区   ==   连接   length   

  

  想要实现省市区的三级联动,首先需要的是一个下拉框,这个下拉框用我们的<select>标签就能实现,具体如下:

<select id="province" onchange="chooseProvince(this)">

<option value="1">请选择省</option>

</select>
<select id="city" onchange="choosecity(this)">
<option value="1">请选择市</option>
</select>
<select id="area">
<option value="1">请选择区</option>
</select>

  此处的onchange是一个触发事件,用来连接js脚本语言实现的内容。最基础的下拉框出来之后,需要准备的便是一个全国省市区的数据。这种数据网络上一般都有具体存在形式类似如下

var data=[{name:‘北京‘,cityList:[‘‘,‘‘,‘‘...‘‘]},{name:‘湖北‘,cityList:[{name:‘武汉‘,areaList:[‘‘,‘‘,‘‘,...‘‘]},{},{},{}...{}]},{},{}...{}];

  下拉框中的数据,使用输入法输入是个不理智的想法,所以此处体现了循环遍历的重要性,循环的长度是所有数据集合的长度,将遍历出来的所有省,直辖市,行政区放入到一个集合中。单独获取data中第一组name的方法是 data.name即可。在遍历的过程中增加新的省份便实现了第一个下拉框的数据。

  这里得到的省集合是为了与市联动而准备的,也就是第二个下拉框的内容。第二个下拉框的内容受到第一个的选择的影响,首先要判断出第一个选择的是哪个省,这里用

var index = th.selectedIndex-1;
var provinceName = provinceArray[index];

获取市的name首先要确定其所在的cityList,而获取cityList则需要其对应的省(第一个下拉框的选择,即上面的provinceName),正因为如此,遍历省的集合,当provinceName相等于其中一个时,以此作为判断条件,获取此时的cityList,cityName集合中的name便是所需要的市,具体方法类似于获取省的方法,继而获得了city的name。在这里需要注意的是,当选择省的时候,之前的市的内容必须清空,否则增加所需要的对应的市的时候会在原有的基础上进行。这里清空的方法有很多,我喜欢使用的是在遍历添加市之前,增加一个对象.innerHTML="";

第三个下拉框内容的增加方法等同于第二个,需要它的前一级信息的集合,即市的集合。判断出选择的市,方法同上,然后以,遍历过程中市的内容相等于选择的市内容相等作为条件,得到areaList,区的集合,这里增加区的时候同样需要把之前的增加内容清空。

区的单纯增加的详细代码如下,前提是准确获取对应的区的集合:

for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));

  总结:总的来说,每一个下拉框内容的添加都是建立在获取对应集合的基础之上。获取集合的条件即如上所述,其中需要注意局部变量与全局变量的使用范围。

js主要内容如下

function chooseProvince(th){
var index = th.selectedIndex-1;
var provinceName = provinceArray[index];
for(var n=0; n<provinceList.length; n++){
var provice = provinceList[n];
console.log(provice.name == provinceName);
if (provice.name == provinceName){
cityList = provice.cityList;
cityTag.innerHTML="";
console.log(cityList);
for(var c=0; c<cityList.length; c++){
var city = cityList[c];
var cityName = city.name;
cityArray[c]=cityName;
cityTag.add(new Option(cityName,c));
   }
  }
 }
}
function choosecity(tr){
var index = tr.selectedIndex;
var cityName = cityArray[index];
for(var m=0;m<cityList.length;m++){
var city1=cityList[m];
if(cityName == city1.name){
var areaList= city1.areaList
areaTag.innerHTML="";
for(var a=0;a<areaList.length;a++){
var area = areaList[a];
areaTag.add(new Option(area,a));
      }
    }
  }
}

以上纯属个人观点,如有问题请多多指出,谢谢。

js中的省市区三级联动

标签:脚本语言   语言   this   hang   ++   行政区   ==   连接   length   

原文地址:http://www.cnblogs.com/gfc1kafei/p/6713744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!