Menu terkait provinsi dan kota kecil membutuhkan banyak waktu untuk dijelajahi. Alasannya adalah bahwa itu tidak terampil dalam jQuery. Karena telah bekerja sangat keras untuk menyelesaikan komponen, secara alami ingin membagikannya untuk mereka yang perlu menggunakannya.
Ini hanya versi dasar, dan perlu dioptimalkan nanti.
Kode: Alamat Unduh Menu Terkait Provinsi dan Kota
menjelaskan:
Saya tidak akan berbicara tentang pernyataan SQL lagi, berisi dua file "City.sql" dan "Provinsial.sql".
1. Mari kita bicara tentang mendapatkan data terlebih dahulu
public void initprocitys () {logger.info ("Get the Region"); Daftar <Provincials> provinsi = provinsi.me.getProvincials (); untuk (provinsi provinsi: provinsi) {daftar <itys> cities = citys.me.getCitysbyprovincialid (provinsi.getlong ("id")); provinsi.put ("kota", jsonkit.toJson (kota)); } setAttr ("Provinsi", Provinsi); render ("prositity.jsp");}1). Dapatkan semua menu provinsi terlebih dahulu.
2). Dapatkan menu kota yang sesuai sesuai dengan ID provinsi.
3). Saat mendapatkan menu kota, harap dicatat bahwa daftar dikonversi ke data JSON, dan Jackjson digunakan di sini.
2. Bicara tentang tata letak halaman
<Pilih name = "province_code" id = "province_select"> <c: foreach item = "$ {provinsi}" var = "item"> <option value = "$ {item.procode}" cdata = '$ {item.citys}'> $ {item.proname} </option "</c: f untuk: for/for {for/for {for/for {for/for {for {for {for/cityprocode </city {for. id = "city_select"> </pilih>1). Dua pemilihan digunakan, dan belum ada gaya yang ditambahkan
2). Gunakan foreach untuk menginisialisasi menu provinsi terlebih dahulu, dan pada saat yang sama mengikat data kota ke atribut CDATA.
3. Ceritakan tentang implementasi JS
$ (function () {provinsialchange (); var $ provinsi = $ ("#province_select"); $ provinsi.change (provinsialchange);}); functionChange () {var $ provinsi = $ ("#province_select"); // Nilai kode yang ditampilkan di tingkat provinsi var provinsi_code = $ provinsi.val (); var $ selectedOption = $ ('#province_select opsi [value =' + provinsi_code + ']'); var city_data = yunm.jsoneval ($ selectedOption.attr ("cdata")); // daftar menu kota $ city_select = $ ("#city_select"); $ city_select.empty (); untuk (var i = 0; i <city_data.length; i ++) {var code = city_data [i] .code; var cname = city_data [i] .cname; $ city_select.append ("<option value = '"+code+"'>"+cName+"</ption>"); }}1). Saat halaman inisialisasi pemuatan dan switching menu provinsi, menu kota perlu dimuat
2). Pertama -tama dapatkan menu provinsi, dapatkan nilai saat ini, dan kemudian dapatkan opsi sesuai dengan nilainya
3). Dapatkan data kota dari opsi, dan perhatikan menggunakan eval untuk mengonversi data. Alasan spesifiknya adalah karena itu terutama ditambahkan ().
4.) Lingkarkan melalui menu kota dan tampilan output
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk belajar pemrograman bootstrap.