รหัสการนำไปใช้อย่างง่ายสำหรับเอฟเฟกต์การเชื่อมโยงของจังหวัดและเทศบาล (แนะนำ)

เอฟเฟกต์การเชื่อมโยงระดับที่สองของกล่องดรอปดาวน์มักจะพบในสถานการณ์แอปพลิเคชันรายวันโดยเฉพาะอย่างยิ่งเมื่อมีตัวเลือกหลายตัวเลือกที่เกี่ยวข้องกับภูมิภาคพันธุ์ ฯลฯ ตัวอย่างเช่น: กล่องดรอปดาวน์การเชื่อมโยงจังหวัดและเทศบาลทั่วไปเมื่อเลือกจังหวัดรายการเมืองจะเปลี่ยนแปลงมากขึ้น

แนวคิด:

1. เอฟเฟกต์การเชื่อมโยงที่เรียกว่าชี้ให้เห็นว่าเมื่อข้อมูลเปลี่ยนแปลงในระดับหลักจะส่งผลกระทบต่อการเปลี่ยนแปลงขององค์ประกอบข้อมูลระดับเด็กที่เกี่ยวข้อง

ด้านล่างนี้เป็นข้อมูลของจังหวัดและเมืองที่สร้างขึ้น:

 var linkdatas = {จังหวัด: [{"รหัส": "0", "ชื่อ": "โปรดเลือก"}, {"รหัส": "1", "ชื่อ": "Beijing"}, {"รหัส": "2", "ชื่อ": "tianjin"}, {"รหัส" "ชื่อ": "hubei"}, {"รหัส": "5", "ชื่อ": "guangdong"}, {"รหัส": "6", "ชื่อ": "อื่น ๆ "}] เมือง: {0: "โปรดเลือก"] " "Tianjin"], 3: ["Cangzhou", "Shijiazhuang", "Qinhuangdao", "อื่น ๆ "], 4: ["เมือง Wuhan", "เมือง Yichang", "เมือง Xiangfan", "เมืองอื่น ๆ " "เมือง Zhuhai", "อื่น ๆ "], 6: ["อื่น ๆ "]}};

2. สร้างโหนดตัวเลือกแบบไดนามิกตามข้อมูล:

 ฟังก์ชั่น addOptions (เป้าหมาย, ตัวเลือก) {var optionele = null, target = เป้าหมาย, ตัวเลือก = ตัวเลือก, optuplen = options.length; สำหรับ (var i = 0; i <optionlen; i ++) {aptopelele = document.createElement ('ตัวเลือก'); Optionele.value = ตัวเลือก [i] .Value; Optionele.Text = ตัวเลือก [i] .Text; target.options.add (Optionele); -

3. ตามข้อมูลจังหวัดและเทศบาลดังกล่าวข้างต้นรหัสแสดงถึงตัวระบุที่ชี้ไปที่ "ระดับจังหวัด" และเมื่อข้อมูลจังหวัดเปลี่ยนแปลงเหตุการณ์การเปลี่ยนแปลงเริ่มต้นขึ้น:

 pro.onchange = function () {console.log (นี่); 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); -

รหัส HTML:

 <div> <h3> เอฟเฟกต์การเชื่อมโยงกล่องแบบดึงลง </h3> <p> จังหวัด: <เลือกชื่อ = "จังหวัด" id = "จังหวัด"> </เลือก> </p> <p> เมือง: <เลือกชื่อ = "เมือง" id = "เมือง"> </select> </p>

รหัส JavaScript ทั้งหมด:

 var linkdatas = {จังหวัด: [{"รหัส": "0", "ชื่อ": "โปรดเลือก"}, {"รหัส": "1", "ชื่อ": "Beijing"}, {"รหัส": "2", "ชื่อ": "tianjin"}, {"รหัส" "ชื่อ": "hubei"}, {"รหัส": "5", "ชื่อ": "guangdong"}, {"รหัส": "6", "ชื่อ": "อื่น ๆ "}] เมือง: {0: "โปรดเลือก"] " "Tianjin"], 3: ["Cangzhou", "Shijiazhuang", "Qinhuangdao", "อื่น ๆ "], 4: ["เมือง Wuhan", "เมือง Yichang", "เมือง Xiangfan", "เมืองอื่น ๆ " "เมือง Zhuhai", "อื่น ๆ "], 6: ["อื่น ๆ "]}}; ฟังก์ชั่น addOptions (เป้าหมาย, ตัวเลือก) {var optionele = null, target = เป้าหมาย, ตัวเลือก = ตัวเลือก, optuplen = options.length; สำหรับ (var i = 0; i <optionlen; i ++) {aptopelele = document.createElement ('ตัวเลือก'); Optionele.value = ตัวเลือก [i] .Value; Optionele.Text = ตัวเลือก [i] .Text; target.options.add (Optionele); }} ฟังก์ชั่น ProvinciscitySlink (pro, c) {var ld = linkdatas, จังหวัด = ld.provinces, city = ld.citys, initcity = city [0], probox = []; /*เพิ่มจังหวัด*/ สำหรับ (var i = 0; i <provinces.length; i ++) {probox.push ({"ข้อความ": จังหวัด [i] .name, "ค่า": จังหวัด [i] .code})} addoptions (pro, probox); /*เริ่มต้นเมือง*/ addoptions (c, [{"text": initcity, "value": initcity}]); /*เพิ่มเหตุการณ์เชื่อมโยง*/ pro.onchange = function () {console.log (นี่); 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.getElementById ('จังหวัด'), Cities = document.getElementById ('เมือง'); Provincescityslink (จังหวัด, เมือง);

รหัสการใช้งานอย่างง่ายข้างต้น (แนะนำ) ของเอฟเฟกต์การเชื่อมโยงจังหวัดและเทศบาลเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น