ส่วน HTML
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> encapsulation การเชื่อมโยงหลายระดับ </title> <link href = "./ css/bootstrap.css" rel = "Stylesheet" src = "./ duoji.js"> </script> <body> <div style = "margin: 100px auto;"> <div id = "box1"> </div> </div> <div style = "margin: 100px auto;"> <div> id = "Box2"> ชื่อ) $. select ('box1', 'พื้นที่ 1'); $. select ('box2', 'are2'); </script> </body> </html>รหัส duoji.js
(ฟังก์ชั่น ($) {$ .select = function (กล่อง, addInputClass) {var i = ใหม่เลือก; return i.init (กล่อง, addInputClass)} // ประกาศวิธีการเชื่อมโยงหลายระดับคลาส var select = new function (); select.prototype = {// define แอตทริบิวต์คลาสนี้ // คอนเทนเนอร์ที่ต้องเพิ่มองค์ประกอบ this.eleclass = addInputClass; // ตำแหน่งของแต่ละเหตุการณ์ classThis.first (); // สร้างตัวเลือกใหม่เพื่อรับ}, ก่อน: function () {// ประกาศตัวแปรภายนอก var boxName = this.boxName; var eleclass = this.eleclass obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, ฟังก์ชั่น (data) {ตัวเลือก var = "<ตัวเลือกค่า = '' โปรดเลือก </option>" var list = data.data; value = '"+key+"> "+list [key] .Arename+" </optup> ";} $ (' <div> <select name =" '+eleclass+' [] "num =" 0 "pnode =" 'boxName+' " cname = "'+eleclass+'"> '+ตัวเลือก+' </select> </div> '). appendto (box) .find (' เลือก '). bind (' เปลี่ยน ', ฟังก์ชั่น () {obj.change ($ (this))});},' jsonp '); BoxName = $ (เหตุการณ์) .attr ('pnode'); num = eleclass.index ($ (เหตุการณ์))+1; //console.log($( this).attr('num''t)); ent (). ลบ ();}});/*console.log (boxname); console.log (classname); console.log ($ (เหตุการณ์)); console.log ($ (เหตุการณ์) .val ());*/// loop Ajax Method $ .ajax ({type: "get", datatype: "jsonp", url: "http://127.0.0.1:83/areas",data: {id: id}, ซิงค์: เท็จ // = data.dataif (data.state === '1') {ตัวเลือก var = "<ตัวเลือกค่า = ''> โปรดเลือก </optup>"; สำหรับ (คีย์ var ในรายการ) {ตัวเลือก+= "<ตัวเลือกค่า = '"+คีย์+"'>"+รายการ [คีย์] pnode = "'+boxname+'" "cname =" '+classname+' "> '+ตัวเลือก+' </select> </div> '). upcendto (box) .find (' select '). bind (' เปลี่ยน ', function () {obj.change (นี้)}; BoxName = $ (เหตุการณ์) .attr ('pnode'); console.log ("ชื่อคอนเทนเนอร์:"+boxname+"/n ชื่อคลาสทริกเกอร์:"+classname);}, // กล่องเลือกแรกได้รับข้อมูล getFirstelement: function () {var main = $ (#'+this.main); $. get ("http://127.0.0.0. ตัวเลือก = "<ตัวเลือกค่า = ''> โปรดเลือก </optup>"; var list = data.data; สำหรับ (คีย์ var ในรายการ) {ตัวเลือก+= "<ตัวเลือกค่า = '"+คีย์+"'>"+รายการ [คีย์]ประเภทข้อมูลที่จัดทำโดยแบ็กเอนด์: JSON
หากมีข้อมูล: state = 1
ตัวอย่าง:
ข้อมูล: {110000: {id: "110000", Areaname: "Beijing", Pid: "0", Shortname: "Beijing", ระดับ: "1", ตำแหน่ง: "TR_0", เรียงลำดับ: "1"} 120000: {id: "120000", Areaname: ตำแหน่ง: "tr_0", เรียงลำดับ: "2"} 130000: {id: "130000", Areaname: "จังหวัดเหอเป่ย", PID: "0", ชื่อสั้น: "Hebei", ระดับ: "1", ตำแหน่ง: "TR_0" "Shanxi", ระดับ: "1", ตำแหน่ง: "tr_0", เรียงลำดับ: "4"} 150000: {id: "150000", aneaname: "ชั้นในเขตปกครองตนเองของ Mongolia", PID: "0", ชื่อสั้น: "Liaoning Province", PID: "0", ShortName: "Liaoning", ระดับ: "1", ตำแหน่ง: "TR_0", เรียงลำดับ: "6"} 220000: {id: "2200000", Areaname: "Jilin Province", Pid: "0" "7"} 230000: {id: "230000", Areaname: "จังหวัด Heilongjiang", pid: "0", shortname: "Heilongjiang", ระดับ: "1", ตำแหน่ง: "tr_0", เรียงลำดับ: "8"}: {id: "3100" ระดับ: "1", ตำแหน่ง: "tr_0", เรียงลำดับ: "9"} 320000: {id: "320000", Areaname: "มณฑลเจียงซู", pid: "0", shortname: "Jiangsu", ระดับ: "1", ตำแหน่ง: Province ", PID:" 0 ", ShortName:" Zhejiang ", ระดับ:" 1 ", ตำแหน่ง:" TR_0 ", เรียงลำดับ:" 11 "} ...... }, รัฐ:" 1 "หากไม่มีสถานะข้อมูล = 0
ตัวอย่าง:
รัฐ: "0"