ในระหว่างขั้นตอนการพัฒนาโครงการรายวันผลการเชื่อมโยงระดับที่สองของกล่องดรอปดาวน์มักจะเห็นโดยเฉพาะอย่างยิ่งเมื่อมีตัวเลือกหลายตัวเลือกที่เกี่ยวข้องกับภูมิภาคพันธุ์ ฯลฯ ตัวอย่างเช่น: กล่องดรอปดาวน์การเชื่อมโยงจังหวัดและเทศบาลทั่วไปจะเปลี่ยนมากขึ้นเมื่อเลือกจังหวัด
แนวคิด:
1. เอฟเฟกต์การเชื่อมโยงที่เรียกว่าชี้ให้เห็นว่าเมื่อข้อมูลเปลี่ยนแปลงในระดับหลักจะส่งผลกระทบต่อการเปลี่ยนแปลงขององค์ประกอบข้อมูลระดับเด็กที่เกี่ยวข้อง
ด้านล่างนี้เป็นข้อมูลของจังหวัดและเมืองที่สร้างขึ้น:
var linkDatas = {จังหวัด: [{"รหัส": "0", "ชื่อ": "ได้โปรด เลือก "}, {" รหัส ":" 1 "," ชื่อ ":" Beijing "}, {" รหัส ":" 2 "," ชื่อ ":" tianjin "}, {" รหัส ":" 3 "," ชื่อ " ":" Hebei "}, {" Code ":" 4 "," Name ":" Hubei "}, {" Code ":" 5 "," Name ":" Guangdong "}, {" Code ":" 6 "," Na ฉัน ":" อื่น ๆ "}], เมือง: {0: [" โปรดเลือก "], 1: [" เขต Chaoyang "," Haidian District "," Dongcheng District "," เขต Xicheng "," Fangshan District "," อื่น ๆ "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," อื่น ๆ "], 4: [" เมืองหวู่ฮัน " City "," Foshan City "," Zhuhai City "," อื่น ๆ "], 6: [" อื่น ๆ "]}};2. สร้างโหนดตัวเลือกแบบไดนามิกตามข้อมูล:
ฟังก์ชั่น addOptions (เป้าหมาย, ตัวเลือก) {var optionele = null, target = เป้าหมาย, ตัวเลือก = ตัวเลือก, ตัวเลือก = opotions.length; สำหรับ (var i = 0; i <optionlen; i ++) {aptopelele = document.createelement ( ตัวเลือก [i] .text; target.options.add (ตัวเลือก);}}3. ตามข้อมูลจังหวัดและเทศบาลดังกล่าวข้างต้นรหัสแสดงถึงตัวระบุที่ชี้ไปที่ "ระดับจังหวัด" และเมื่อข้อมูลจังหวัดเปลี่ยนแปลงเหตุการณ์การเปลี่ยนแปลงเริ่มต้นขึ้น:
pro.onchange = function () {console.log (นี่); var ct = เมือง [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*เพิ่มเมือง*/ สำหรับ (var j = 0; j <ctlen; j ++) {ctbox.push ({"ข้อความ": ct [j], "value": ct [j]});} addoptions (c, ctbox)รหัส HTML:
<div> <h3> ดึงเอฟเฟกต์การเชื่อมโยงกล่อง </h3> <p> จังหวัด: <เลือกชื่อ = "จังหวัด" id = "จังหวัด"> </เลือก> </p> <p> เมือง: <เลือกชื่อ = "เมือง" id = "เมือง"> </select> </p>
รหัส JavaScript ทั้งหมด:
var linkDatas = {จังหวัด: [{"รหัส": "0", "ชื่อ": "ได้โปรด เลือก "}, {" รหัส ":" 1 "," ชื่อ ":" Beijing "}, {" รหัส ":" 2 "," ชื่อ ":" tianjin "}, {" รหัส ":" 3 "," ชื่อ ": "hebei"}, {"รหัส": "4", "ชื่อ": "hubei"}, {"รหัส": "5", "ชื่อ": "guangdong"}, {"รหัส": "6", "ชื่อ": "อื่น ๆ "}], เมือง: {0: ["โปรดเลือก"], 1: ["เขต Chaoyang", "Haidian District", "Dongcheng District", "เขต Xicheng", "Fangshan District "," อื่น ๆ "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," อื่น ๆ "], 4: [" เมืองหวู่ฮัน " City "," Foshan City "," Zhuhai City "," อื่น ๆ "], 6: [" อื่น ๆ "]}}; ฟังก์ชั่น addoptions (เป้าหมาย, ตัวเลือก) {var optionele = null, target = เป้าหมาย, ตัวเลือก = ตัวเลือก, ตัวเลือก = ตัวเลือก ตัวเลือก [i] .value; opptionele.text = ตัวเลือก [i] .text; target.options.add (Optionele);}} ฟังก์ชั่น provincescityslink (pro, c) {var ld = linkdatas, provinces = ld.provinces, เมือง = ld.citys, initcity = เมือง Provinces.length; i ++) {probox.push ({"ข้อความ": จังหวัด [i] .name, "ค่า": จังหวัด [i] .code})} addoptions (pro, probox);/*เริ่มต้นเมือง*/addoptions function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*เพิ่มเมือง*/ สำหรับ (var j = 0; j <ctlen; j ++) {ctbox.push ({"ข้อความ": ct [j], "value": ct [j]});} addoptions (c, ctbox);}} var provinces = document.get document.getElementById ('เมือง'); ProvincescitySlink (จังหวัด, เมือง);