Home > Web Front-end > JS Tutorial > js implementation of simple province, city and county three-level linkage effect examples_javascript skills

js implementation of simple province, city and county three-level linkage effect examples_javascript skills

WBOY
Release: 2016-05-16 15:14:55
Original
1678 people have browsed it

The example in this article describes how js can achieve a simple three-level linkage effect of provinces, cities and counties. Share it with everyone for your reference, the details are as follows:

js code part

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

Copy after login

html part

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

Copy after login

Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of json operation skills in JavaScript", "Summary of JavaScript animation special effects and skills", " Summary of JavaScript expansion techniques", "Summary of JavaScript motion effects and techniques", "Summary of JavaScript mathematical operation usage" and "Javascript object-oriented introductory tutorial

I hope this article will be helpful to everyone in JavaScript programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template