Bagian html
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> enkapsulasi tautan multi-level </iteme> <link href = "./ css/bootstrap.css" rel = "styleSheet"> <script script = ". src="./duoji.js"></script><body><div style="margin:100px auto;"><div id="box1"></div> </div><div style="margin:100px auto;"><div> id="box2"></div> </div><script>//Container name, name name (newly generated class name) $. SELECT ('box1', 'Area1'); $. Pilih ('box2', 'Area2'); </script> </body> </html>Kode duoji.js
(function ($) {$ .select = function (box, addInputClass) {var i = baru pilih; return i.init (box, addInputClass)} // mendeklarasikan metode tautan multi-level var var select = new function (); select.prototype = {// tentukan kelas atribut kelas: box, addInplass () {{// kotak ini. // wadah yang perlu menambahkan elemen this.eleClass = addInputClass; // Lokasi setiap acara classThis.first (); // Buat select baru untuk mendapatkan}, pertama: function () {// Deklarasikan variabel eksternal var boxname = this.boxName; var eleclass = this.eleclass; var boxname = this.boxname; var eleclass = this.eleclass; var box = this.boxName; var eleclass = this.eleclass; var box = this.boxname; var eleclass = this.eleclass; var box = this.box obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, function (data) {var option = "<option value = ''> Pilih </pection>"; var list = data.data; for (var key in list) {option+= " value = '"+key+"'> "+list [key] .Arename+" </tipt> ";} $ ('<veT> <pilih name ="'+eleclass+'[] "num =" 0 "pnode ="'+boxname+'" cname = "'+eleclass+'"> '+opsi+' </ pilih> </div> '). appendTo (box) .find (' select '). bind (' ubah ', function () {obj.change ($ (ini))});},' jsonp ');}, // ubah event event (this)) {{/{/{/{{/{{/{{/{{{/{{{{{{{{/jsonp'); boxname = $ (event) .attr ('pnode'); num = eleclass.index ($ (acara))+1; //console.log($(this).attr('num' )) ;//console.log($().attr('num' );if($(this).attr('num'num')$(event).attr('num'num'TUn ent (). Remest ();}});/*console.log (boxname); console.log (classname); console.log ($ (event)); console.log ($ (event) .val ());*/// loop Metode AJAX $ .AJAX ({Type: "Get", DataType: "JSONP", URL: "http://127.0.0.1:83/areas",data: {id: id}, sinkronisasi: false, // setel ke sinkronisasi (function (data) {// console.log. = data.dataif (data.state === '1') {var option = "<option value = ''> Pilih </potion>"; for (var Key in list) {option+= "<option value = '"+key+">"+nol' "num =" </class num+"</clashe"; pnode = "'+boxName+'" "cname =" '+className+' "> '+opsi+' </ pilih> </div> '). appendTo (box) .find (' select '). bind (' ubah ', fungsi () {obj.change (this)});}}} {function () {{ini); boxname = $ (event) .attr ('pnode'); Console.log ("Nama Kontainer:"+BoxName+"/N Nama kelas yang dipicu:"+className);}, // kotak pilih pertama mendapatkan informasi getFirstelement: function () {var main = $ ('#'+this.main); $. Option = "<option value = ''> Pilih </tipt>"; var list = data.data; untuk (tombol var dalam daftar) {option+= "<option value = '"+key+"'>"+Daftar [key] .Arename+"</tiption>";} Main.html (option);}, 'jsonp');Jenis data yang disediakan oleh backend: json
Jika ada data: status = 1
contoh:
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", Posisi: "TR_0", Sortir: "2"} 130000: {id: "130000", AREAName: "Provinsi Hebei", PID: "0", Shortname: "Hebei", Level: "1", Posisi: "TR_0", Sort: "3"} 140000: {ID: "1400", AREANMAME ", AREAN:" 3 "} 140000: {ID:" 1400 ", AREAN", "AREAN", "" "Shanxi", level: "1", posisi: "tr_0", sort: "4"} 150000: {id: "150000", AREAName: "Wilayah Mongolia Mongolia", PID: "0", Shortname: "SORTNER:"}}}} {"1", " "Provinsi Liaoning", PID: "0", Shortname: "Liaoning", Level: "1", Posisi: "TR_0", Sort: "6"} 220000: {ID: "2200000", AREAName: "Provinsi Jilin", POD: "0", Singkatnya: "Jilin", Level: " "7"} 230000: {id: "230000", Aleaname: "Heilongjiang Province", PID: "0", Shortname: "Heilongjiang", Level: "1", Posisi: "TR_0", Sort: "8"} 310000: {ID: "3100", "" "", "" "" "" 3 310000: {ID: "3100", "" "," "" "" "310000: {ID:" 3100 "," AREAN "," " Level: "1", Posisi: "TR_0", Sort: "9"} 320000: {id: "320000", AREAName: "Jiangsu Province", PID: "0", Shortname: "Jiangsu", level: "1", posisi: "TR_0", urut: "10"} "3300:" ID: "ID:" 1300: " Provinsi ", PID:" 0 ", Shortname:" Zhejiang ", level:" 1 ", posisi:" tr_0 ", sort:" 11 "} ......}, menyatakan:" 1 "Jika tidak ada status data = 0
contoh:
Negara: "0"