Menyedari kesan rantaian tiga peringkat wilayah dan majlis perbandaran berdasarkan jquery

Menyedari kesan rantaian tiga peringkat wilayah dan majlis perbandaran berdasarkan jquery_jquery

WBOY

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

asal

1308 orang telah melayarinya

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>

Salin selepas log masuk

2. Sebutkan data wilayah dan perbandaran

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

 });

Salin selepas log masuk

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.