Menyedari kesan rantaian tiga peringkat wilayah dan majlis perbandaran berdasarkan jquery_jquery

Artikel ini telah mengemas kini data pautan tiga peringkat wilayah dan majlis perbandaran projek Data terkini yang dikemas kini tersedia di Sansha, Hainan dan dikongsi dengan semua rakan yang memerlukannya.
JQUERY JSON, tiada pangkalan data, kod JS tulen, tiada penyulitan, tiada pemampatan, boleh digunakan terus dalam mana-mana projek.

Nota: Data datang dari laman web rasmi Biro Perangkaan Negara.

Gambar pertama:

Terikat dengan wilayah dan bandar

Cara menggunakan:

1. Sebut Harga JQUERY

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

2. Sebutkan data wilayah dan perbandaran

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

3. Kod 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>

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

 });

Muat turun kod sumber: "Menyedari kesan hubungan tiga peringkat wilayah dan majlis perbandaran berdasarkan jquery"

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.