js省市县三级联动作效果应实例,js完成简单的省

作者: 韦德国际1946国际网址  发布:2019-07-08

本文实例陈述了jQuery达成的省市县三级联合浮动菜单功效。分享给大家供大家参谋,具体如下:

js省市县三级联动作效果应实例,js完成简单的省市县三级联合浮动功用实例。正文实例呈报了JS落成的五级联合浮动菜单功效。分享给大家供大家参照他事他说加以考察,具体如下:

本文实例呈报了js达成轻松的省市县三级联动作效果应。分享给大家供大家仿照效法,具体如下:

正文实例陈述了js达成轻易的省市县三级联合浮动作效果应。分享给大家供大家参照他事他说加以考察,具体如下:

运维效果截图如下:

js落成多种联合浮动的不二秘技比很多,这里给出一种5级联合浮动的例子,其实能够扩展成N级联动,在做项指标时候境遇了这般二个主题材料而是有不可能从数据库中动态的加载那几个选择,所以唯有想艺术从单个的页面起头来管理了,应该为项目标表单是动态发生的,所以须求各种流程的陈设性进度中须求有独立的页面来拍卖,那样就决定了不可能改造已部分事情逻辑来达成多元表单的联合浮动。

js代码部分

效果图:

图片 1

运维效果图如下:

//省市县数据格式
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()
}

图片 2

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:js省市县三级联动作效果应实例,js完成简单的省

关键词:

上一篇:一声令下轻易示例
下一篇:没有了