ตัวอย่างในบทความนี้แบ่งปันเทคนิคพิเศษของเมนูดรอปดาวน์ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ตัวอย่างที่ 1: เมนูแบบเลื่อนลงของจังหวัดและเทศบาลที่เชื่อมโยง
เหตุการณ์ onchange เกิดขึ้นเมื่อเนื้อหาของโดเมนเปลี่ยนแปลง
<script type = "text/javascript"> var arr = new Array (); // data array // กำหนดข้อมูลโครงสร้าง: id, ชื่อ, รหัสหลัก arr [arr.length] = [1, 'ปักกิ่ง', null]; arr [arr.length] = [2, 'เสฉวน', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'ปักกิ่ง', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'กวางโจว', 3]; arr [arr.length] = [7, 'เซินเจิ้น', 3]; // การตั้งค่าแบบไดนามิกของฟังก์ชั่นรายการแบบเลื่อนลง (พิมพ์) {ถ้า (type == 'Province') {// รับ DOM ของเมนูดรอปดาวน์จังหวัด Var Province = Document.getElementById ("จังหวัด"); Province.innerhtml = ''; // เนื้อหาว่างเปล่าก่อน // กรอกข้อมูลในตัวละคร sub-character var = '<ค่าตัวเลือก = ""> </optup>'; // โอนอาร์เรย์สำหรับ (var i = 0; i <arr.length; i ++) {var item = arr [i]; // รายการปัจจุบัน // ถ้าไม่มีรหัสหลักมันเป็นจังหวัดถ้า (รายการ [2] == null) prottr+= '<ค่าตัวเลือก ='+รายการ [0]+'>'+รายการ [1]+'</optural>'; } Province.innerhtml = prottr; // กรอกเนื้อหาใหม่} อื่นถ้า (type == 'city') {// รับ ID ของจังหวัดปัจจุบัน var currproid = document.getElementById ("จังหวัด"). ค่า; ถ้า (currproid == '') ส่งคืนเท็จ; // รับ Dom of the City Drop-Down เมนู Var City = Document.getElementById ("เมือง"); city.innerhtml = ''; // กรอกเนื้อหาก่อน // กรอกข้อมูลในอักขระ var citystr = '<ค่าตัวเลือก = ""> </optup>'; // transweep อาร์เรย์สำหรับ (var i = 0; i <arr.length; i ++) {var item = arr [i]; // รายการปัจจุบัน // ตัดสินว่าเป็นเมืองที่บันทึกปัจจุบันหรือไม่ถ้า (รายการ [2] == currproid) CityStr+= '<ค่าตัวเลือก ='+รายการ [0]+'>'+รายการ [1]+'</petion>'; } city.innerhtml = citystr; // เติมเนื้อหาใหม่}} </script> <body style = "text-allign: center;" onload = "filloptions ('จังหวัด');"> <!-กำหนดเมนูแบบเลื่อนลง-> การออม: <เลือก id = "จังหวัด" onchange = "filloptions ('เมือง')"> </select> <br/> <br/> เมือง: <select id = "เมือง">ตัวอย่างที่ 2: การเชื่อมโยงสามระดับของจังหวัดเมืองและเมนูดรอปดาวน์มณฑล
<script type = "text/javascript"> var arr = new Array (); // data array // กำหนดข้อมูลโครงสร้าง: id, ชื่อ, รหัสหลัก arr [arr.length] = [1, 'ปักกิ่ง', null]; arr [arr.length] = [2, 'เสฉวน', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'ปักกิ่ง', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'กวางโจว', 3]; arr [arr.length] = [7, 'เซินเจิ้น', 3]; arr [arr.length] = [8, 'เขต Wuhou', 5]; arr [arr.length] = [9, 'Qingyang District', 5]; arr [arr.length] = [10, 'Baiyun District', 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, 'Conghua City', 6]; // การตั้งค่าแบบไดนามิกของฟังก์ชั่นโครงการแบบดึงลง (พิมพ์) {ถ้า (type == 'จังหวัด') {// รับ Dom ของเมนูดรอปดาวน์จังหวัด Var Province = Document.getElementById ("จังหวัด"); Province.innerhtml = ''; // เนื้อหาว่างเปล่าก่อน // กรอกอักขระของ var prottr = '<ตัวเลือกค่า = ""> </optup>'; สำหรับ (var i = 0; i <arr.length; i ++) {// ถ่ายโอน array var item = arr [i]; // รายการปัจจุบัน // ถ้าไม่มีรหัสหลักมันเป็นจังหวัดถ้า (รายการ [2] == null) prottr+= '<ค่าตัวเลือก ='+รายการ [0]+'>'+รายการ [1]+'</optural>'; } Province.innerhtml = prottr; // กรอกเนื้อหาใหม่} อื่นถ้า (type == 'City') {// รับ ID ของจังหวัดปัจจุบัน var currproid = document.getElementById ("จังหวัด") ค่า; ถ้า (currproid == '') ส่งคืนเท็จ; // รับ Dom of the City Drop-Down เมนู Var City = Document.getElementById ("เมือง"); city.innerhtml = ''; // เนื้อหาว่างเปล่าก่อน // กรอกข้อมูลในเมือง var CityStr = '<ค่าตัวเลือก = ""> </optup>'; สำหรับ (var i = 0; i <arr.length; i ++) {// ถ่ายโอน array var item = arr [i]; // รายการปัจจุบัน // ตัดสินว่าเป็นเมืองที่บันทึกไว้ในปัจจุบันหรือไม่ถ้า (รายการ [2] == CurrProid) CityStr+= '<ค่าตัวเลือก ='+รายการ [0]+'>'+รายการ [1]+'</petion>'; } city.innerhtml = citystr; // กรอกเนื้อหาใหม่} อื่นถ้า (type == 'พื้นที่') {// รับรหัสของเมืองปัจจุบัน var currcityid = document.getElementById ("เมือง") ค่า; ถ้า (currcityid == '') ส่งคืนเท็จ; // รับ DOM ของเมนูแบบเลื่อนลงเขตและเขตพื้นที่ var area = document.getElementById ("พื้นที่"); พื้นที่. innerhtml = ''; // กรอกข้อมูลในเขตและมณฑลอักขระ var sailyTr = '<ตัวเลือกค่า = ""> </optup>'; สำหรับ (var i = 0; i <arr.length; i ++) {// ถ่ายโอน array var item = arr [i]; // รายการปัจจุบัน // ผู้พิพากษาว่าเป็นเขตหรือเขตภายใต้เมืองปัจจุบันถ้า (รายการ [2] == CurrcityId) พื้นที่+= '<ค่าตัวเลือก ='+รายการ [0]+'>'+รายการ [1]+'</optup>'; } Area.innerHtml = SailyTr; // เติมเนื้อหาใหม่}} </script> <body style = "text-sally: center;" onload = "Filloptions ('Province');"> <!-กำหนดเมนูแบบเลื่อนลง-> จังหวัด: <เลือก id = "จังหวัด" onchange = "Filloptions ('City')"> </select> <br/> <br/> เมือง: <select id = "เมือง" id = "พื้นที่"> </select> <br/> <br/> </body>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น