Kesan hubungan peringkat kedua dan ketiga wilayah dan perbandaran berdasarkan jQuery JSON_jquery

Kesan jatuh turun pautan wilayah dan bandar digunakan secara meluas dalam WEB, terutamanya dalam beberapa sistem maklumat ahli dan tapak web e-dagang. Pembangun biasanya menggunakan Ajax untuk melaksanakan pautan lungsur turun tanpa muat semula. Artikel ini akan menerangkan cara menggunakan pemalam jQuery untuk mencapai kesan pautan tahap kedua (ketiga) bagi lungsur turun dinamik wilayah dan bandar tanpa menyegarkan dengan membaca data JSON.

HTML

Mula-mula muatkan perpustakaan jquery dan pemalam cityselect di kepala.

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

Seterusnya, kami meletakkan tiga pilihan dalam #bandar dan menetapkan atribut kelas bagi tiga pilihan kepada: prov, bandar dan dist, yang masing-masing mewakili tiga kotak lungsur wilayah, bandar dan daerah (daerah) . Ambil perhatian bahawa jika anda hanya ingin mencapai hubungan peringkat kedua wilayah dan bandar, hanya alih keluar pilihan dist ketiga.

 
<div id="city"> 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div> 

jQuery

Memanggil pemalam pilihan bandar adalah sangat mudah, cuma panggil terus:

 
$("#city").citySelect(); 

Panggilan parameter tersuai, tetapkan wilayah dan bandar lalai.

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"长沙", //城市 
  dist:"岳麓区", //区县 
  nodata:"none" //当子集无数据时，隐藏select 
}); 

Sudah tentu, anda juga boleh melanjutkan dan menyesuaikan data pilihan senarai lungsur Anda boleh menetapkan kandungan lungsur mengikut keperluan.

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
}); 

Anda juga boleh menggunakan bahasa hujung belakang​​​seperti PHP untuk menukar data dalam pangkalan data ke dalam format JSON, kemudian gunakan parameter url untuk menghala ke alamat hujung belakang untuk mencapai kesan pautan bebas muat semula.

 
$("#city").citySelect({ 
  url:"data.php" 
}); 

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.