js is a simple example of three level linkage effect between provinces cities and counties

An example of js is given to illustrate the simple linkage effect of three levels of provinces, cities and counties. To share for your reference, the details are as follows:

js code section

// Provincial and county data formats 
var province_city_county_data=[
  {
    province:"4 sichuan ",
    city:[
      {
        cityName:" chengdu ",
        county:[" chengdu "," Chung city "," Jintang county "]
      },
      {
        cityName:" nanchong ",
        county:[" Those days "," Nanbu county "," YingShan County "]
      }
    ]
  },
  {
    province:" Beijing ",
    city:[
      {  cityName:" The Beijing municipal ",
        county:[" The dongcheng district "," Chaoyang district "]
      }
    ]
  },
  {
    province:" anhui ",
    city:[
      {  cityName:" anqing ",
        county:[" Anqing city "," Huaining county "," qianshan "]
      },
      {  cityName:" bengbu ",
        county:[" bengbu "," guzhen "," cb "]
      }
    ]
  }
]
var opt0 = [" provinces "," Prefecture level "," City, county level city, county "];
var selectID_arr2=["provinceid","cityid","countyid"];
var province_index;
window.onload = function(){
  // Initializes the drop-down box 
  function init_select(){
    init_title();
    init_province();
    bind_province();
  }
  // Initializes the prompt title 
  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]);
    }
  }
  // Initialize province 
  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);
    }
  }
  // Bind to a province onchange The event 
  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;  // The serial number ratio of each province  option  It's going to be smaller 1
        init_city(province_index);
        bind_city();
        init_county(province_index,0);
      }else{
        clear_city();
        clear_county();
      }
    }
  }
  // choose 1 Prefecture-level cities can only be initialized by provinces 
  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;
  }
  // Clear prefecture-level city information 
  function clear_city(){
    var city_select_obj = document.getElementById(selectID_arr2[1]);
    city_select_obj.options.length=0; // Each selected 1 A new province   Redelete prefecture-level city information 
    init_title();   // Reinitialize the header 
  }
  // Bind to prefecture-level cities onchange The event 
  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();
      }
    }
  }
  // choose 1 Prefecture-level cities before the county can be initialized 
  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;
  }
  // Clear county information 
  function clear_county(){
    var county_select_obj = document.getElementById(selectID_arr2[2]);
    county_select_obj.options.length=0; // Each selected 1 A new prefecture-level city   Redelete county information 
    init_title();   // Reinitialize the header 
  }
  init_select()
}

html part

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

For more information about JavaScript, please refer to json In JavaScript, JavaScript Animation Special Effects and Techniques, JavaScript Extension Techniques, JavaScript Movement Effects and Techniques, JavaScript Mathematical Operation and Usage, and javascript Object-oriented Tutorial.

I hope this article has been helpful in JavaScript programming.