Realisierung des dreistufigen Verknüpfungseffekts von Provinzen und Gemeinden basierend auf jquery_jquery

In diesem Artikel wurden die dreistufigen Verknüpfungsdaten der Provinzen und Gemeinden des Projekts aktualisiert. Die neuesten aktualisierten Daten sind in Sansha, Hainan, verfügbar und werden mit allen Freunden geteilt, die sie benötigen.
JQUERY JSON, keine Datenbank, reiner JS-Code, keine Verschlüsselung, keine Komprimierung, kann direkt in jedem Projekt verwendet werden.

Hinweis: Die Daten stammen von der offiziellen Website des National Bureau of Statistics.

Erstes Bild:

An Provinzen und Städte binden

Anwendung:

1. Zitieren Sie JQUERY

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

2. Zitieren Sie Provinz- und Gemeindedaten

<script type="text/javascript" src="pdata.js"></script>

3. HTML-Code:

<div class="row">
 <div class="col-sm-12">
  <div class="form-group">
   <label class="control-label col-sm-2">所在区域</label>
   <div class="col-sm-3">
    <select name="input_province" id="input_province" class="form-control">
    </select>
   </div>
   <div class="col-sm-3">
    <select name="input_city" id="input_city" class="form-control">
    </select>
   </div>
   <div class="col-sm-3">
    <select name="input_area" id="input_area" class="form-control">
    </select>
   </div>
  </div>
 </div>
</div>

4. JS-Code:

$(function () {
  var html = "<option value=''>== 请选择 ==</option>"; $("#input_city").append(html); $("#input_area").append(html);
  $.each(pdata,function(idx,item){
   if (parseInt(item.level) == 0) {
     html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
    }
  });
  $("#input_province").append(html);

  $("#input_province").change(function(){
   if ($(this).val() == "") return;
   $("#input_city option").remove(); $("#input_area option").remove();
   var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
   var html = "<option value=''>== 请选择 ==</option>"; $("#input_area").append(html);
   $.each(pdata,function(idx,item){
    if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
      html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
     }
   });
   $("#input_city").append(html);  
  });

  $("#input_city").change(function(){
   if ($(this).val() == "") return;
   $("#input_area option").remove();
   var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
   var html = "<option value=''>== 请选择 ==</option>";
   $.each(pdata,function(idx,item){
    if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
      html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
     }
   });
   $("#input_area").append(html);  
  });
  //绑定
  $("#input_province").val("广东省");$("#input_province").change();
  $("#input_city").val("深圳市");$("#input_city").change();
  $("#input_area").val("罗湖区");

 });

Quellcode-Download: "Erkennung des dreistufigen Verknüpfungseffekts von Provinzen und Gemeinden basierend auf JQuery"

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.