js-Implementierung einfacher dreistufiger Verknüpfungseffekte für Provinzen, Städte und Kreise. Beispiele_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Implementierung einfacher dreistufiger Verknüpfungseffekte von Provinzen, Städten und Landkreisen mithilfe von js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JS-Codeteil

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

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

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der JSON-Operationsfähigkeiten in JavaScript“, „Zusammenfassung der JavaScript-Animationsspezialeffekte und Fähigkeiten", " Zusammenfassung der JavaScript-Erweiterungstechniken", "Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken", "Zusammenfassung der Verwendung mathematischer JavaScript-Operationen" und „Javascript objektorientiertes Einführungs-Tutorial 》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.