HTML -Teil
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> Mehr-Level-Verknüpfungsverkapselung </title> <link href = "./ CSS/bootstrap.css" rel = "stylesheet"> <script Src = ". src = "./ Duoji.js"> </script> <body> <div style = "margin: 100px auto;"> <div id = "box1"> </div> </div> <div style = "margin: 100px auto;" Name) $. SELECT ('Box1', 'Area1');Duoji.js Code
(Funktion ($) {$ .Select = function (Box, AddInputClass) {var i = new select; return i.init (box, addInputClass)} // Deklare die Multi-Level-Verknüpfungsmethode Klasse var select = new function // Container, der Elemente hinzufügen muss. obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, function (data) {var option = "<option value = ''> Bitte wählen Sie </option>"; var list = data.data; für (var key in list) {option+= "<Option" <Option "<Option" <Option "<Option" </option). value = '"+taste+"'> "+list [taste] .Aename+" </option> ";} $ ('<div> <select name ="+eleclass+' [] "num =" 0 "pnode ="+boxname+'" cname = "'+eleclass+'"> '+option+' </select> </div> '). appendTo (Box) .find (' select '). Bind (' change ', function () {obj.change ($ ($ (this))});},' JSONP ');}, // Ereignisänderung: Funktion: Funktion: Funktion (Ereignis) {// Ereignis) {// // Declare var BoxName = $ (Ereignis) .Attr ('Pnode'); Num = Eleclass.Index ($ (Ereignis))+1; //console.log($(This).attr('num')));//console ent (). remove ();}});/*console.log (boxName); console.log (className); console.log ($ (Ereignis)); console.log ($ (Ereignis) .val ());*/// Loop AJAX -Methode $ .ajax ({Typ: "get", DataType: "JSONP", URL: "http://127.0.0.1:83/areas" = data.dataif (data.state === '1') {var option = "<option value = ''> Bitte wählen Sie </option>"; für (var key in list) {option+= "<option value = '"+taste+"'>"+list [key] .ArEANNAME+"</option>"; pnode = "'+boxname+'" "cname =" '+className+' "> '+option+' </select> </div> '). appendTo (Box) .find (' select '). bind (' ändere ', function () {obj.change (this)});}}})})})})})})})},},},}, // Query Die Information in den Informationen in den Informationen in den Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in der Information in den Informationen in den Informationen in den Informationen in den Informationen in den Informationen in den Informationen in den Informationen in den Informationen in den Informationen in der Information. BoxName = $ (Ereignis) .Attr ('pnode'); console.log ("Containername:"+boxname+"/n ausgelöster Klassenname:"+className);}, // Das erste ausgewählte Box erhält die Informationen getFirstelement: function () {var main = $ ('#'+this.main); $. Option = "<Option Value = ''> Bitte auswählen </option>"; var list = data.data; für (var key in list) {option+= "<option value = '"+taste+"'>"+list [key] .Arename+"</option>";} Main.html (Option);}, jonp ') ·}}});Datentyp vom Backend bereitgestellt: JSON
Wenn es Daten gibt: Status = 1
Beispiel:
data:{110000:{id: "110000", areaname: "Beijing", pid: "0", shortname: "Beijing", level: "1", position: "tr_0", sort: "1"}120000:{id: "120000", areaname: "Tianjin", pid: "0", shortname: "Tianjin", level: "1", position: "tr_0", sort: "2"}130000:{id: "130000", areaname: "Hebei Province", pid: "0", shortname: "Hebei", level: "1", position: "tr_0", sort: "3"}140000:{id: "140000", areaname: "Shanxi Province", pid: "0", shortname: "Shanxi", level: "1", position: "tr_0", sort: "4"}150000:{id: "150000", areaname: "Inner Mongolia Autonomous Region", pid: "0", shortname: "Inner Mongolia", level: "1", position: "tr_0", sort: "5"}210000:{id: "210000", areaname: "Liaoning Province", pid: "0", shortname: "Liaoning", level: "1", position: "tr_0", sort: "6"}220000:{id: "2200000", areaname: "Jilin Province", pid: "0", shortname: "Jilin", level: "1", position: "tr_0", sort: "7"}230000:{id: "230000", areaname: "Heilongjiang Province", pid: "0", shortname: "Heilongjiang", level: "1", position: "tr_0", sort: "8"}310000:{id: "310000", areaname: "Shanghai", pid: "0", shortname: "Shanghai", Level: "1", Position: "Tr_0", sortieren: "9"} 320000: {id: "320000", areaname: "jiangsu provinz", pid: "0", Shortname: "Jiangsu", Level: "1", Position: "Tr_0", sortiert: "} 3300: {} 3300: Provinz ", PID:" 0 ", Shortname:" Zhejiang ", Level:" 1 ", Position:" tr_0 ", sort:" 11 "} ......}, Zustand:" 1 "Wenn es keinen Datenzustand gibt = 0
Beispiel:
Zustand: "0"