kaedah jquery untuk mendapatkan data json untuk merealisasikan wilayah dan bandar cascading_jquery

Contoh dalam artikel ini menerangkan kaedah jquery mendapatkan semula data json untuk merealisasikan lata wilayah dan bandar. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Menggunakan jQuery mobile sebagai rangka kerja untuk mencipta web mudah alih memerlukan merealisasikan fungsi cascading wilayah dan perbandaran Kod khusus adalah seperti berikut (masih terdapat kawasan yang memerlukan pengoptimuman):

Kod html:

Dalam jQuery mudah alih, terdapat atribut senarai input, diikuti dengan teg

<input id="province" list="prvlist" placeholder="省/自治区/直辖市" onblur="changeProvince();"> 
  <datalist id="prvlist"> 
 
  </datalist> 
  <input  id="city" list="citylist" placeholder="市" onblur="changeCity();"> 
  <datalist id="citylist"> 
 
  </datalist> 
  <input  id="area" list="arealist" placeholder="区"> 
  <datalist id="arealist"> 
 
</datalist>

kod js:

kod js, fungsi utama

1. Ekstrak data json dan ikat pada senarai lungsur wilayah

2. Selepas input wilayah dipilih, senarai perbandaran akan diikat secara automatik

3. Senarai lungsur peringkat daerah adalah sama dengan peringkat bandar

<script> 
    $(function () { 
      getProvince();  //页面打开后，省级下拉列表自动绑定 
    }) 
    //获取省份 
    function getProvince() { 
      var Aid; 
      var Afather; 
      $.get('area_json0.txt', {}, function (data) { 
        for (var i = 0; i < data.length; i++) { 
          if (data[i].fatherId == 0) { 
            Afather += '<option id=" ' + data[i].id + '" value="' + data[i].name + '">'; 
          } 
        } 
        $("#prvlist").append(Afather); 
      } , 'json'); 
    } 
 
    function changeProvince(){ 
      var city; 
      var prv_val=$("#province").val(); 
      getJson(prv_val); 
    } 
    function changeCity(){ 
      var city_val=$("#city").val(); 
      getJsonArea(city_val); 
    } 
    function getJson(Name){ 
      var cityID; 
      $.get('area_json0.txt', {}, function (data) { 
        for (var i = 0; i < data.length; i++) { 
          if (data[i].name == Name) { 
            cityID=data[i].id; 
          } 
        } 
        setCity(cityID); 
      } , 'json'); 
    } 
    function setCity(val){ 
      var Acity; 
      var $listcity=$("#citylist"); 
      $.get('area_json0.txt', {}, function (data) { 
        for (var n = 0; n < data.length; n++) { 
          if (data[n].fatherId == val) { 
            alert(data[n].id); 
            Acity += '<option id=" ' + data[n].id + '" value="' + data[n].name + '">'; 
          } 
        } 
        $listcity.append(Acity); 
      } , 'json'); 
   } 
    function getJsonArea(Name){ 
      var areaID; 
      $.get('area_json0.txt', {}, function (data) { 
        for (var i = 0; i < data.length; i++) { 
          if (data[i].name == Name) { 
            areaID=data[i].id; 
          } 
        } 
        setArea(areaID); 
      } , 'json'); 
    } 
    function setArea(Aval){ 
      var Aarea; 
      var $listarea=$("#arealist"); 
      $.get('area_json0.txt', {}, function (data) { 
        for (var m = 0; m < data.length; m++) { 
          if (data[m].fatherId == Aval) { 
            alert(data[n].id); 
            Aarea += '<option id=" ' + data[m].id + '" value="' + data[m].name + '">'; 
          } 
        } 
        $listarea.append(Aarea); 
      } , 'json'); 
    } 
</script>

Kod harus dioptimumkan lagi, jadi simpan kod itu buat masa ini.