เมื่อเร็ว ๆ นี้หลายหน้าต้องโหลดกล่องรายการแบบเลื่อนลงเพื่อให้ผู้ใช้เลือก ปรากฎว่าพวกเขากำลังโหลดทางฝั่งเซิร์ฟเวอร์และควรใช้ ในที่สุดเนื่องจากการพิจารณาตรรกะทางธุรกิจฟังก์ชั่นบางอย่างของ DropdownList จำเป็นต้องนำเข้าสู่การใช้งานลูกค้า ตอนนี้ฟังก์ชั่นรายการดรอปดาวน์รู้สึกดีกว่าเมื่อวางไว้บนฝั่งเซิร์ฟเวอร์
วิธีการเฉพาะ:
ใส่ตัวควบคุม DropdownList ลงในหน้าและเพิ่มรายการเพื่อวิเคราะห์รหัส HTML ที่สร้างขึ้น ด้วยวิธีนี้เมื่อใช้ JS สำหรับการควบคุมแบบไดนามิกรหัสทดสอบจะชัดเจนมากดังนี้:
<ASP: DropDownList ID = "DropDownList1" Runat = "Server"> <ASP: ListItem> 1 </ASP: ListItem> </ASP: DropDownList>
ดูในเบราว์เซอร์และวิเคราะห์ HTML: ต่อไปนี้เป็นรหัส HTML ที่สร้างขึ้นโดยตัวควบคุมรายการแบบเลื่อนลง ไม่มีอะไรที่เหมือนกับเลือกธรรมดา
มีความแตกต่าง จากนั้นคุณสามารถเติมเต็มลบเลือกและควบคุมอื่น ๆ ผ่าน JS
<select name = "dropdownList1" id = "dropdownList1"> <optural value = "1"> 1 </potion> </select>
คุณสามารถลบ <asp: listitem> 1 </asp: listitem> และตอนนี้เพิ่มการควบคุมปุ่ม HTML สองตัวเพื่อใช้การเพิ่มตัวเลือกและลบตัวเลือกทั้งหมดตามลำดับ รหัสแหล่งที่มาของปุ่มมีดังนี้:
<อินพุต id = "button1" type = "button" value = "เพิ่มตัวเลือก" onclick = "addoption ()" /> <อินพุต id = "button2" type = "button" value = "ลบตัวเลือกทั้งหมด" onclick = "deloption ()" />
การเพิ่มและการลบฟังก์ชั่นมีดังนี้:
ฟังก์ชั่น addoption () {var ddlobj = document.getElementById ("dropdownlist1"); // รับวัตถุถ้า (ddlobj.length> 0) deloption (); // ลบทั้งหมดก่อนจากนั้นเพิ่ม var opttext = อาร์เรย์ใหม่ ("ผู้ก่อตั้ง", "จีน", "beijing"); Ooption = null; สำหรับ (var i = 0; i <opttext.length; i ++) {ooption = ตัวเลือกใหม่ (opttext [i], optvalue [i]); ddlobj.options.add (ooption);}} ฟังก์ชัน deloption () {var ddlobj = เอกสาร i = ddlobj.length-1; i> = 0; i-) {ddlobj.remove (i); // firefox ไม่รองรับ ddlcurselectkey.options.remove () ทั้งสองสนับสนุน}}}}}}ดูในเบราว์เซอร์คุณสามารถสร้างตัวเลือกแบบเลื่อนลงได้อย่างง่ายดายซึ่งมีประสิทธิภาพมากกว่าเซิร์ฟเวอร์เนื่องจากมีการสร้างไคลเอนต์
รหัสที่ทำงานด้านข้าง แต่ในเวลานี้หากคุณต้องการใช้ DropDownList1.SelectedValue เพื่อรับตัวเลือกที่เลือกโดยผู้ใช้คุณจะมี
มีข้อผิดพลาด นี่เป็นเพราะ DropdownList ถูกเพิ่มโดย JS แบบไดนามิกดังนั้นรายการของมันจึงไม่ได้อยู่ใน ViewState และไม่ได้รับการดูแล
กล่าวคือเราไม่สามารถจัดการกับฝั่งเซิร์ฟเวอร์ได้ เพื่อแก้ปัญหานี้มีสองวิธีในการใช้: 1. บันทึกการควบคุมที่ซ่อนอยู่
วิธีตัวเลือกผู้ใช้ 2. วิธีการร้องขอรูปแบบ (ดู MSDN Taste Ajax)
1. เราเพิ่มการควบคุมที่ซ่อนอยู่ในหน้าและใช้เพื่อบันทึกข้อมูลเกี่ยวกับการเปลี่ยนแปลงในตัวเลือก DropdownList เพื่อให้ความรู้สึกของผู้ใช้เป็นทางเลือก
หลังจากที่เรามีข้อมูลที่น่าสนใจเราสามารถรับข้อมูลบนเซิร์ฟเวอร์และดำเนินการเพื่อให้ตระหนักถึงการแบ่งงานระหว่างลูกค้าและบริการอย่างสมเหตุสมผล
เพิ่มเหตุการณ์ onchange ไปยังตัวควบคุมรายการแบบเลื่อนลงและรหัส HTML มีดังนี้:
<ASP: DropDownList ID = "DropDownList1" Runat = "Server" OnChange = "RESVITEM ()"> </ASP: DropDownList>
เหตุการณ์ onchange มีดังนี้ เหตุการณ์นี้ส่วนใหญ่จะบันทึกค่าที่ผู้ใช้เลือก:
ฟังก์ชั่น resvitem () {var objddl = document.getElementById ("dropdownlist1"); document.getElementById ("hiddenfield1") ค่า = objddl.options [objddl.SelectedIndex] .Value;}}หลังจากนี้เราใช้การควบคุมปุ่ม ASP: เพื่อทดสอบผลลัพธ์:
void button1_click (ผู้ส่งวัตถุ, eventargs e) {response.write (hiddenfield1.value);}ณ จุดนี้งานทั้งหมดเสร็จสมบูรณ์ แต่ก็ยังมีปัญหาอยู่ เหตุการณ์การเปลี่ยนแปลงของ DropdownList จะถูกเลือกเฉพาะเมื่อผู้ใช้เปลี่ยนดรอปดาวน์
มันจะถูกทริกเกอร์เมื่อรายการเป็นเท่านั้น ดังนั้นเมื่อผู้ใช้ส่งด้วยตัวเลือกเริ่มต้นค่า NULL จะได้รับ ดังนั้นเมื่อเติมตัวเลือกเราสามารถทำได้
การเริ่มต้นที่ซ่อนอยู่ เพิ่มบรรทัดของรหัสไปยังเหตุการณ์ addoption ดังนี้:
ฟังก์ชั่น addoption () {var ddlobj = document.getElementById ("dropdownlist1"); // รับวัตถุถ้า (ddlobj.length> 0) deloption (); // ลบทั้งหมดก่อนจากนั้นเพิ่ม var opttext = อาร์เรย์ใหม่ ("ผู้ก่อตั้ง", "จีน", "beijing"); Ooption = null; สำหรับ (var i = 0; i <opttext.length; i ++) {ooption = ตัวเลือกใหม่ (opttext [i], optvalue [i]); ddlobj.options.add (ooption);} document.getElementById ("hiddenfield1")อย่างไรก็ตามส่วนสีแดงข้างต้นยังไม่ประสบความสำเร็จในการเพิ่มภายใต้เบราว์เซอร์ TT และฉันยังไม่ได้ลองท่องเว็บอื่น ๆ นี่เป็นอีกวิธีหนึ่งในการเขียน:
ฟังก์ชั่น getDeptList () {var ddlcityType = document.getElementById ("ddlcityType"); var ddlposition = document.getElementById ("ddlposition"); var v = ddlcityType.options deptlist = guest_userregister.getDeptList (v.value) .Value; var deptList = อาร์เรย์ใหม่ (); deptList = deptlist.split (';'); สำหรับ (var i = 0; i <deptlist.lists; i ++) {ถ้า dept = deptlist [i] .split (','); var opt = document.createElement ("ตัวเลือก"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddlposition.insertbefore (opt, ddlposition.firstchild);}}} function deloption () {var ddluserschool = document.getElementByidid ( ในขณะที่ (num> 0) {สำหรับ (var j = 0; j <num; j ++) {ddluserschool.remove (j);} num = ddluserschool.length;}} ฟังก์ชั่น getSchoollist () {deloption (); document.getElementById ("ddluserschool"); var v = ddlprovince.options [ddlprovince.selectedIndex]; var deptlist = guest_userregister.getschoollist (v.value). i = 0; i <deptlist.length; i ++) {ถ้า (deptlist [i]! = "") {var dept = deptlist [i] .split (','); var opt = document.createelement ("ตัวเลือก"); opt.innerhtml = dept [1]; opt.value = dept [0]; ddluserschool.insertbefore (opt, ddluserschool.firstchild);}}}}}}}