45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何使用js实现省市县三级联动效果?

如何使用js实现省市县三级联动效果?

2016-10-14 12:34:00 来源:www.45fan.com 【

如何使用js实现省市县三级联动效果?

本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考,具体如下:

js代码部分

//省市县数据格式
var province_city_county_data=[
 {
  province:"四川",
  city:[
   {
    cityName:"成都",
    county:["成都市","崇州市","金堂县"]
   },
   {
    cityName:"南充",
    county:["仪陇县","南部县","营山县"]
   }
  ]
 },
 {
  province:"北京",
  city:[
   { cityName:"北京市",
    county:["东城区","朝阳区"]
   }
  ]
 },
 {
  province:"安徽",
  city:[
   { cityName:"安庆",
    county:["安庆市","怀宁县","潜山县"]
   },
   { cityName:"蚌埠",
    county:["蚌埠市","固镇县","怀远县"]
   }
  ]
 }
]
var opt0 = ["省份","地级市","市、县级市、县"];
var selectID_arr2=["provinceid","cityid","countyid"];
var province_index;
window.onload = function(){
 //初始化下拉框
 function init_select(){
  init_title();
  init_province();
  bind_province();
 }
 //初始化提示标题
 function init_title(){
  for(var k = 0;k<selectID_arr2.length;k++){
   var select_obj= document.getElementById(selectID_arr2[k]);
   select_obj.options[0]=new Option(opt0[k],opt0[k]);
  }
 }
 //初始化省份
 function init_province(){
  var province_select_obj = document.getElementById(selectID_arr2[0]);
  var province_len = province_city_county_data.length;
  for(var i = 0;i<province_len;i++){
   province_select_obj.options[i+1] = new Option(province_city_county_data[i].province,province_city_county_data[i].province);
  }
 }
 //给省份绑定onchange事件
 function bind_province(){
  var province_select_obj = document.getElementById(selectID_arr2[0]);
  province_select_obj.onchange=function(){
   var opt_index =province_select_obj.selectedIndex;
   if(opt_index!=0){
    province_index = opt_index-1; //每个省份的序号比 option 的下标要小1
    init_city(province_index);
    bind_city();
    init_county(province_index,0);
   }else{
    clear_city();
    clear_county();
   }
  }
 }
 //选择一个省份才能初始化地级市
 function init_city(index){
  clear_city();
  var city_len = province_city_county_data[index].city.length;
  for(var i = 0;i<city_len;i++){
   document.getElementById(selectID_arr2[1]).options[i+1] = new Option(province_city_county_data[index].city[i].cityName,province_city_county_data[index].city[i].cityName);
  }
  document.getElementById(selectID_arr2[1]).options[1].selected = true;
 }
 //清除地级市信息
 function clear_city(){
  var city_select_obj = document.getElementById(selectID_arr2[1]);
  city_select_obj.options.length=0; //每次选中一个新的省份 都重新删除地级市的信息
  init_title();  //重新初始化标题
 }
 //给地级市绑定onchange事件
 function bind_city(){
  var city_select_obj = document.getElementById(selectID_arr2[1]);
  city_select_obj.onchange=function(){
   var opt_index =city_select_obj.selectedIndex;
   if(opt_index!=0){
    init_county(province_index,opt_index-1);
   }else{
    clear_county();
   }
  }
 }
 //选择一个地级市后才能初始化县
 function init_county(index,city_index){
  clear_county();
  var county_len = province_city_county_data[index].city[city_index].county.length;
  for(var i = 0;i<county_len;i++){
   document.getElementById(selectID_arr2[2]).options[i+1] = new Option(province_city_county_data[index].city[city_index].county[i],province_city_county_data[index].city[city_index].county[i]);
  }
  document.getElementById(selectID_arr2[2]).options[1].selected = true;
 }
 //清除县城信息
 function clear_county(){
  var county_select_obj = document.getElementById(selectID_arr2[2]);
  county_select_obj.options.length=0; //每次选中一个新的地级市 都重新删除县的信息
  init_title();  //重新初始化标题
 }
 init_select()
}

html部分

<select id="provinceid"></select>
<select id="cityid"></select>
<select id="countyid"></select>

希望本文所述对大家JavaScript程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/78636.html
Tags: 实现 简单 市县
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部