Baru-baru ini, beberapa halaman perlu memuat beberapa kotak daftar drop-down untuk dipilih pengguna. Ternyata mereka memuat di sisi server dan harus digunakan. Akhirnya, karena pertimbangan logika bisnis, beberapa fungsi dropdownlist perlu dimasukkan ke dalam implementasi klien. Sekarang fungsi daftar drop-down terasa jauh lebih baik daripada saat meletakkannya di sisi server.
Metode khusus:
Masukkan kontrol dropdownlist ke dalam halaman dan tambahkan item untuk menganalisis kode HTML yang dihasilkannya. Dengan cara ini, saat menggunakan JS untuk kontrol dinamis, kode uji akan sangat jelas sebagai berikut:
<Asp: dropdownlist id = "dropDownlist1" runat = "server"> <asp: listItem> 1 </sp: listitem> </sh: dropdownlist>
Lihat di browser dan analisis HTML: Berikut ini adalah kode HTML yang dihasilkan oleh kontrol DRETDOWNLIST. Tidak seperti orang biasa terpilih
Ada perbedaan. Kemudian Anda dapat mengisi, menghapus, memilih, dan kontrol lainnya secara dinamis melalui JS.
<Pilih name = "dropDownList1" id = "dropDownlist1"> <option value = "1"> 1 </pection> </ pilih>
Anda dapat menghapus <Asp: ListItem> 1 </sp: listItem>, dan sekarang tambahkan dua kontrol tombol HTML untuk mengimplementasikan penambahan opsi dan menghapus semua opsi masing -masing. Kode sumber tombol adalah sebagai berikut:
<input id = "button1" type = "button" value = "add option" ontClick = "addOption ()" /> <input id = "button2" type = "Button" value = "hapus semua opsi" ontClick = "deloption ()" />
Menambahkan dan menghapus fungsi adalah sebagai berikut:
fungsi addOption () {var ddlobj = document.geteLementById ("dropdownlist1"); // dapatkan objek jika (ddlobj.length> 0) deloption (); // hapus semua itu terlebih dahulu, dan kemudian tambahkan var opttext = array baru ("pendiri", "Cina", "beijing"); Array ("0", "1", "2"); var oOption = null; for (var i = 0; i <opttext.length; i ++) {ooption = opsi baru (optText [i], optValue [i]); ddlobj.options.add (ooption);}}}}}}}}}}}}}}}}}}}}}}} varion}; document.geteLementById ("dropdownlist1"); // dapatkan objek untuk (var i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // firefox tidak mendukung ddlcurselectKey.options.remove (), keduanya dukungan}}}}}}}}}}}}}}}}}Lihat di browser, Anda dapat dengan mudah membuat opsi drop-down terpilih, yang lebih efisien daripada server karena ini dihasilkan klien
kode yang berfungsi di samping. Tetapi saat ini, jika Anda ingin menggunakan dropdownlist1.selectedValue untuk mendapatkan opsi yang dipilih oleh pengguna, maka Anda akan memiliki
Mendapat kesalahan. Ini karena dropdownlist ditambahkan secara dinamis oleh JS, jadi itemnya bukan milik ViewState dan tidak dipertahankan,
Dengan kata lain, kami tidak dapat menanganinya di sisi server. Untuk mengatasi masalah ini, ada dua cara untuk menggunakan: 1. Simpan Kontrol Tersembunyi
Metode opsi pengguna; 2. Metode Permintaan.Form. (Lihat MSDN Taste Ajax)
1. Kami menambahkan kontrol tersembunyi ke halaman dan menggunakannya untuk menyimpan informasi tentang perubahan opsi dropdownlist, sehingga rasa pilihan pengguna
Setelah kami memiliki informasi yang menarik, kami dapat memperoleh informasi di server dan memprosesnya untuk mewujudkan pembagian kerja antara pelanggan dan layanan secara wajar.
Tambahkan acara Onchange ke kontrol dropdownlist, dan kode HTML -nya adalah sebagai berikut:
<Asp: dropdownlist id = "dropDownlist1" runat = "server" onchange = "resVitem ()"> </sh: dropdownlist>
Acara Onchange adalah sebagai berikut. Acara ini terutama menyimpan nilai yang dipilih oleh pengguna:
function resVitem () {var objddl = document.geteLementById ("dropDownlist1"); document.geteLementById ("hiddenfield1"). value = objddl.options [objddl.SelectedIndex] .value;}Setelah ini, kami menggunakan kontrol ASP: untuk menguji hasilnya:
lindung void button1_click (pengirim objek, eventArgs e) {response.write (hiddenfield1.value);}Pada titik ini, semua pekerjaan telah selesai, tetapi masih ada masalah. Acara perubahan dropdownlist hanya dipilih ketika pengguna mengubah drop-down.
Itu hanya akan dipicu saat item itu. Oleh karena itu, ketika pengguna mengirimkan dengan opsi default, nilai nol diperoleh. Oleh karena itu, saat mengisi opsi, kami bisa
Inisialisasi tersembunyi. Tambahkan baris kode ke acara addOption sebagai berikut:
fungsi addOption () {var ddlobj = document.geteLementById ("dropdownlist1"); // dapatkan objek jika (ddlobj.length> 0) deloption (); // hapus semua itu terlebih dahulu, dan kemudian tambahkan var opttext = array baru ("pendiri", "Cina", "beijing"); Array ("0", "1", "2"); var ooption = null; for (var i = 0; i <opttext.length; i ++) {ooption = opsi baru (opttext [i], optValue [i]); ddlobj.options.add (ooption);} document.} document. OptValue [0];}Namun, bagian merah di atas tidak berhasil dalam menambahkan di bawah browser TT, dan saya belum mencoba penjelajahan lainnya. Berikut ini cara menulis lain:
fungsi getDeptList () {var ddlCityType = document.geteLementById ("ddlCityType"); var ddlposition = document.getElementById ("ddlposition"); var v = ddlcityType.options [ddlCityType.SelectectedIndEndEndex];//var varie (var ddlCityType.SElectExiEx; Deptlist = guest_userregister.getDeptList (v.value) .value; var deptlist = array baru (); deptlist = deptlist.split (';'); for (var i = 0; i <deptlist.length; i ++) {if (if if (deptlist [i]! dept = deptlist [i] .split (','); var opt = document.createElement ("opsi"); opt.innerHTML = dept[1];opt.value = dept[0];ddlPosition.insertBefore(opt, ddlPosition.firstChild);}}}function DelOption(){var ddluserSchool = document.getElementById("ddluserSchool");var num=ddluserSchool.length; while (num> 0) {for (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} function getschoollist () {deloption (); var ddlprovince = document.getelementbyid () {deloption (); var ddlprovince = document.getelementbyid ("deloption (); var ddlprovince = document.getelementByid (" " document.geteLementById ("ddluserschool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptlist = guest_userregister.getsChoollist (v.value) .value; var deptlist = new array (); varray = deplist = Depl. i = 0; i <deptlist.length; i ++) {if (deptlist [i]! = "") {var dept = deptlist [i] .split (','); var opt = document.createElement ("opsi"); opt.innerHtml = dept [1]; opt.value = dept [0]; ddluserschool.insertbefore (opt, ddluserschool.firstchild);}}}}