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()

}

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

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

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