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

WBOY
Lepaskan: 2016-05-16 15:56:34
asal
994 orang telah melayarinya

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

jQuery

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

 
$("#city").citySelect(); 
Salin selepas log masuk

Panggilan parameter tersuai, tetapkan wilayah dan bandar lalai.

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

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" 
}); 
Salin selepas log masuk

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" 
}); 
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan