ตัวอย่างค่าดัชนีของ JS การเปลี่ยนตัวเลือกการเลือกการเลือกแบบไดนามิกแบบไดนามิก

document.getElementById ("louyuming"). ตัวเลือก [0]. selected = true; function jsselectisexititem (objselect, objitemvalue) {var isexit = false; สำหรับ (var i = 0; i <objselect.options.length; i ++) {ถ้า (objselect.options [i] .value == objitemvalue) {isexit = true; หยุดพัก; }} return isExit; -

การดำเนินการ JavaScript Select เป็นประเภททั่วไปในรูปแบบ วันนี้เมื่อลบค่าเลือกหลายค่ามีปัญหา หลังจากผ่านไปนานแล้วมันก็เกิดจากดัชนี (นั่นคือเมื่อลบคุณควรเริ่มต้นจากดัชนีขนาดใหญ่จากนั้นลบดัชนีขนาดเล็กมิฉะนั้นดัชนีที่มีดัชนีขนาดใหญ่จะเปลี่ยนไปหลังจากการลบดัชนีขนาดเล็กแล้วดัชนีขนาดใหญ่จะเปลี่ยนไป

 // 4. ลบรายการที่เลือกในฟังก์ชั่นเลือก jsRemoveselectedItemFromSelect (objselect) {var length = objselect.options.length - 1; สำหรับ (var i = length; i> = 0; i-) {ถ้า (objselect [i]. selected == true) {objselect.options [i] = null; -

1 ตรวจสอบว่ามีรายการที่มี value = "paravalue" ในตัวเลือกที่เลือก

2 เพิ่มรายการลงในตัวเลือกที่เลือก

3 ลบรายการจากตัวเลือกที่เลือก

4 ลบรายการที่เลือกในเลือก

5 แก้ไขข้อความของค่า = "paravalue" ในตัวเลือกเลือกเป็น "paratext"

6Set รายการแรกของ text = "paratext" ในการเลือกตามที่เลือก

7 ตั้งค่ารายการค่า = "paravalue" ในการเลือกตามที่เลือก

8 รับค่าของรายการที่เลือกในปัจจุบัน

9 รับข้อความของรายการที่เลือกในปัจจุบัน

10 รับดัชนีของรายการที่เลือกในปัจจุบัน

11 ล้างรายการที่เลือก

-

ลบตัวเลือกทั้งหมดแบบไดนามิกในการเลือก:

 ฟังก์ชั่น deleteAlloptions (sel) {sel.options.length = 0; -

ลบตัวเลือกในการเลือก:

 ฟังก์ชั่น deleteOption (sel, indx) {sel.options.remove (indx); -

เพิ่มตัวเลือกรายการแบบไดนามิกในการเลือก:

 ฟังก์ชั่น addoption (sel, text, value) {sel.options.add (ตัวเลือกใหม่ (ข้อความ, ค่า)); -

การทดสอบข้างต้นได้รับการทดสอบสำเร็จใน IE และ Firefox และฉันหวังว่าพวกเขาจะสามารถใช้งานได้ในอนาคต

-

รหัส JS

 // 1. พิจารณาว่ามีฟังก์ชั่นรายการของ value = "paravalue" ในตัวเลือกที่เลือก jsselectisexititem (objselect, objitemvalue) {var isexit = false; สำหรับ (var i = 0; i <objselect.options.length; i ++) {ถ้า (objselect.options [i] .value == objitemvalue) {isexit = true; หยุดพัก; }} return isExit; } // 2. เพิ่มฟังก์ชั่นรายการลงในตัวเลือกที่เลือก jsadditemtoselect (objselect, objitemtext, objitemvalue) {// ตัดสินว่ามีถ้า (jsselectisexititem (objselect, objitemvalue)) } else {var varitem = ตัวเลือกใหม่ (objitemtext, objitemvalue); objselect.options.add (varitem); การแจ้งเตือน ("เข้าร่วมสำเร็จ"); }} // 3. ลบฟังก์ชั่นรายการออกจากตัวเลือกที่เลือก jsremoveitemfromselect (objselect, objitemvalue) {// ตัดสินว่ามีถ้า (jsselectisexititem (objselect, objitemvalue) {สำหรับ (var i = 0; (objselect.options [i] .value == objitemvalue) {objselect.options.remove (i); หยุดพัก; }} การแจ้งเตือน ("ลบสำเร็จ"); } else {Alert ("รายการนี้ไม่มีอยู่ในการเลือกนี้"); }} // 4. ลบรายการที่เลือกในฟังก์ชั่นเลือก JSREMOVESELECTECTEMFROMSELECT (objselect) {var length = objselect.options.length - 1; สำหรับ (var i = length; i> = 0; i-) {ถ้า (objselect [i]. selected == true) {objselect.options [i] = null; }}} // 5. แก้ไขข้อความของ value = "paravalue" ในตัวเลือกที่เลือกเป็นฟังก์ชัน "paratext" jsupdateitemtoselect (objselect, objitemtext, objitemvalue) {// ตัดสินว่ามี (jsselectisexitiTem objselect.options.length; หยุดพัก; }} การแจ้งเตือน ("แก้ไขสำเร็จ"); } else {Alert ("รายการนี้ไม่มีอยู่ในการเลือกนี้"); }} // 6. ตั้งค่ารายการแรกของ text = "paratext" ในการเลือกเป็นฟังก์ชั่นที่เลือก jsselectitembyValue (objselect, objitemtext) {// ตัดสินว่า var isexit = false; สำหรับ (var i = 0; i <objselect.options.length; i ++) {ถ้า (objselect.options [i] .text == objitemtext) {objselect.options [i]. selected = true; isExit = true; หยุดพัก; }} // แสดงผลลัพธ์ถ้า (isExit) {แจ้งเตือน ("เลือกสำเร็จ"); } else {Alert ("รายการนี้ไม่มีอยู่ในการเลือกนี้"); }} // 7. ตั้งค่ารายการค่า = "paravalue" ในการเลือกที่จะเลือก objselect.value = objitemvalue; // 8. รับค่า var ของรายการที่เลือกในปัจจุบันของ Select CurrselectValue = objselect.Value; // 9. รับข้อความ var currselectText ของรายการที่เลือกในปัจจุบันของ Select var curreslectText = objselect.options [document.all.objselect.selectedIndex] .Text; // 10. รับดัชนีของรายการที่เลือกในปัจจุบันของ Select var currselectindex = objselect.selectedIndex; // 11. ล้างรายการของเลือก objselect.options.length = 0;

รหัสที่สมบูรณ์ของอินสแตนซ์ทั้งหมดมีดังนี้:

 <! doctype html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <head> <title> javascript เลือกตัวเลือกค่าข้อความ </title> <meta name = "คำหลัก" content = "JavaScript เลือกตัวเลือก ตั้งค่า "> <script language =" javascript "> <!-// ผู้แต่ง: [email protected]// Modify: [email protected] watch_ini () {// เริ่มต้นสำหรับ (var i = 0; i <arguments.length; i ++) ตัวเลือก (อาร์กิวเมนต์ [i], อาร์กิวเมนต์ [i]); document.getElementById ("myselect") [i] = ooption;}} ฟังก์ชั่น watch_add (f) {// เพิ่ม var ooption = ตัวเลือกใหม่ (f.word.value, f.word.value); f.keywords [f.keywords f.word.value = f.keywords [f.keywords.selectedIndex] .Text;} function watch_mod (f) {// แก้ไข f.keywords [f.keywordselectedIndex] .Text = f.word.value;} watch_del (f) // บันทึก var set = "" สำหรับ (var i = 0; i <f.keywords.length; i ++) {set += f.keywords [i] .Text +";";} ยืนยัน (set);} //-> </script> </head> <body> <body> <form name = "watch" method = "post" action = "> <select id =" mySelect language = "JavaScript"> <!-watch_ini ("i", "คุณ", "เขา", "เธอ", "เธอ", "มัน", "el"); // คำหลักเริ่มต้น //-> </script> <อินพุต type = "text" name = "word"/> <br/> <input type = "button" value = "เพิ่ม" onclick = "watch_add (this.form);" /> <อินพุต type = "button" value = "แก้ไข" onclick = "watch_mod (this.form);" /> <อินพุต type = "button" value = "ลบ" onclick = "watch_del (this.form);" /> <อินพุต type = "button" value = "save" onclick = "watch_set (this.form);" /> </form> </body> </html>