Réaliser l'effet de liaison à trois niveaux des provinces et des municipalités basé sur jquery

Réaliser l'effet de liaison à trois niveaux des provinces et des municipalités basé sur jquery_jquery

WBOY

Libérer： 2016-05-16 15:23:46

original

1309 Les gens l'ont consulté

Cet article a mis à jour les données de couplage à trois niveaux des provinces et municipalités du projet. Les dernières données mises à jour sont disponibles à Sansha, Hainan et sont partagées avec tous les amis qui en ont besoin.
JQUERY JSON, pas de base de données, code JS pur, pas de cryptage, pas de compression, peut être utilisé directement dans n'importe quel projet.

Remarque : les données proviennent du site officiel du Bureau national des statistiques.

Première photo :

Lier aux provinces et aux villes

Comment utiliser :

1. Citer JQUERY

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

Copier après la connexion

2. Citer les données provinciales et municipales

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

Copier après la connexion

3. Code HTML :

<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>

Copier après la connexion

4.Code JS :

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

 });

Copier après la connexion

Téléchargement du code source : "Réalisation de l'effet de liaison à trois niveaux des provinces et des municipalités basé sur jquery"

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.