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

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

WBOY

Freigeben： 2016-05-16 15:23:46

Original

1351 Leute haben es durchsucht

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>

Nach dem Login kopieren

2. Zitieren Sie Provinz- und Gemeindedaten

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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("罗湖区");

 });

Nach dem Login kopieren

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.