Saat mengerjakan suatu proyek, Anda akan menemukan secara dinamis mendapatkan opsi anak berdasarkan opsi induk dan mencantumkan beberapa kotak centang. Saat mengirimkan, gabungkan yang dipilih menjadi satu karakter dan kirimkan ke latar belakang.
Bab ini akan memberi tahu Anda cara mengimplementasikan operasi ini melalui kontrol JS:
1: Desain kategori induk sebagai radio, tambahkan acara OnClick ke setiap radio, dan Kategori Default 1 adalah status seleksi.
<input type = "centang kotak" nama = "selectAll" id = "selectAll" onclick = "selectAll ();" checked = "checked"/> pilih semua <br> <input type = "Radio" name = "lb" id = "lb" value = "1" onclick = "getzlb (1);" checked = "checked"/> kategori 1 <input type = "Radio" name = "lb" id = "lb" value = "2" onclick = "getzlb (2);"/> kategori 2 <input type = "radio" name = "lb" id = "lb" value = "3" onklick = "getzlb (3);"
2: Ketika halaman dimuat pada awalnya, subkategori harus ditampilkan sesuai dengan kategori induk yang dipilih. Saat mengklik tombol, subkategori juga harus diperoleh, sehingga ditulis sebagai metode yang sama dan dipanggil setelah pemuatan halaman selesai.
window.onload = getzlb ();
3: Dapatkan metode subkategori JS, secara dinamis dapatkan data latar belakang melalui metode AJAX
/** * Dapatkan subkategori, dan tampilkan setelah pemuatan halaman selesai */fungsi getzlb () {// dapatkan var obj = document.geteLementsbyname ("lb"); untuk (var i = 0; i <obj.length; i ++) {if (obj [i] .Checked) {getzlbnews (obj [i] .value); }}} fungsi getZlbnews () {(Dapatkan data tipe peta melalui Ajax; data pengembalian dalam hasil, format json) var json = eval ("("+hasil+")"); // Konversi ke objek JSON // Dapatkan area yang akan ditampilkan oleh subtipe var parent = document.getElementById ('xsqy'); // Biarkan sub-wilayah kosong untuk mencegah induk.innerhtml = ''; var p = 0; var span = ""; // periksa semua document.getElementById ("selectAll"). Checked = true; untuk (var i di json) {p ++; span = "<span style =/" display: inline-block; Lebar: 75px;/"> <input type =/" centang kotak/"checked =/" checked/"onClick =/" checkselectAll ();/"name =/" zlb/"value =/" "+i+"/">"+json [i]+"</span>"; // Ketika ada lebih dari 11 kotak sub-cek, maka newline if (p%11 == 0) {span = span = "<br>"; } // Tambahkan kotak sub-cek satu per satu ke sub-field parent.innerhtml = parent.innerHtml+span; }}4: logika latar belakang,
/ ** * pengembalian peta format peta <kode, nama> * @return */ public string getzlb () {peta <integer, string> zlb = service.getZlb (); // Konversi peta ke format JSON JSON A = JSonserializer.toJson (ZLB); return a.tostring (); }5: JS mengontrol logika apakah akan memilih semua, dan apakah akan memilih semua, dan bagaimana menggabungkan kode yang dipilih saat mengirimkan
/ ** * Pilih semua atau batalkan semua */ function selectAllDz () {var centang kotak = document.geteLementsByName ("zlb"); untuk (var i = 0; i <centang kotak. }}/ ** * Tentukan apakah subkategori dipilih semua, jika tombol semua yang dipilih dipilih, jika tidak, semua tombol yang dipilih tidak dipilih */ function checkselectAll () {var checkboxs = document.geteLementsByName ("zlb"); var isselectall = true; untuk (var i = 0; i <centang kotak. }} if (isSelectAll == false) {document.geteLementById ("selectAll"). checked = false; } else {document.geteLementById ("selectAll"). checked = true; }}/*** splice ID yang dipilih dan pisahkan dengan koma*/function getAllIdStr (checkName) {var select = document.geteLementsbyname (checkName); var idstr = array baru (); for (var i = 0; i <sfect.length; i ++) {if (pilih [i] .mekrut == true) {idstr = idstr.concat (pilih [i] .value); }} return idstr.join (',');}6: Saat melakukan operasi berikutnya, jika Anda mengirimkan, ubah semua yang dipilih menjadi satu karakter dan tetapkan ke kotak teks tersembunyi untuk mengirimkannya ke latar belakang
// Panggil metode ID splicing dan berikan nama elemen yang akan dioperasikan di atas var allzlb = getAllIdStr ('zlb'); // Buat kotak teks tersembunyi, tetapkan yang disambung ke dalamnya, dan gunakan untuk mendapatkan dokumen.getElementById ('allzlbstr'). Value = allzlb;Di atas hanyalah pendapat pribadi. Jika Anda memiliki solusi yang lebih baik, beri tahu saya.
Di atas adalah konten lengkap dari metode implementasi untuk secara dinamis mendapatkan opsi sub-kompleks dan merancang semua pilihan dan pengiriman yang dibawa kepada Anda. Saya harap semua orang akan mendukung wulin.com lebih banyak ~