Parte html
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Multi-level linkage encapsulation</title><link href="./css/bootstrap.css" rel="stylesheet"><script src="./js/jquery.js"></script><script src = "./ duoJi.js"> </script> <body> <div style = "margin: 100px Auto;"> <div id = "Box1"> </div> </iv> <div style = "margen: 100px automático;"> <div> id = "box2"> </div> </div> </div> <script> // nombre de contenedor, nombre (nombre nuevo (nueva generación generada Nombre) $. SELECT ('Box1', 'Area1'); $. SELECT ('Box2', 'Area2'); </script> </body> </html>código duoJi.js
(function ($) {$ .select = function (box, addInputClass) {var i = new Select; return i.init (box, addInputClass)} // Declare el método de enlace multivel de nivel Var select = new Function (); select.prototype = {// Define el atributo de clase Init: function (box, addinputClass) {this.Boxname = box; este.box (box. // Container que necesita agregar elementos this.eleclass = addInputClass; // ubicación de cada evento classthis.first (); // Cree una nueva selección para obtener}, primero: function () {// declare la variable variable var boxName = this.boxName; var eleclass = this.eleclass; var box = this.box; var. obj = this; $. value = '"+Key+"'> "+List [Key] .Arename+" </option> ";} $ ('<div> <select name ="'+eleClass+'[] "num =" 0 "pnode ="'+boxName+'" cname = "'+eleclass+'"> '+opción+' </select> </div> '). appendTo (box) .find (' select '). bind (' Change ', function () {obj.change ($ (this))});},' jsonp ');}, // cambio de eventos: function (event) {// declarar declare var sho -declare vartar (declarar declare Vare Vare Vare Vare. BoxName = $ (Event) .attr ('pnode'); num = Eleclass.index ($ (evento))+1; //console.log($(this).Attr('num'))) ;//console.log($().Attr('num');if($(this).Attr('Num')>$(Event) ent (). remove ();}});/*console.log (boxname); console.log (classname); console.log ($ (evento)); console.log ($ (evento) .val ());*/// bucle método ajax $ .AJAX ({Tipo: "Get", DataType: "JSONP", URL: "http://127.0.0.1:83/areas",data: {id: id}, sinc: falso, // Establecer el éxito sincronoso: function (data) =data.dataif(data.state==='1'){var option="<option value=''>Please select </option>";for(var key in list){option+="<option value='"+key+"'>"+list[key].areaname+"</option>";}$('<div><select name="'+className+'[]" num="'+num+'" pnode = "'+boxname+'" "cname =" '+classname+' "> '+opción+' </select> </div> '). appendTo (box) .find (' select '). bind (' cambie ', function () {obj.change (this)});}}});});}, // QUIERY en la información en la información en la información actual (this)});}}});});}, // QUIERY en la información en la información en la información actual (this)});}}});});}, // QUISTE INFORMACIÓN EN LA INFORMACIÓN EN LA INFORMACIÓN CONTRIBLE () BoxName = $ (Event) .attr ('pnode'); console.log ("nombre del contenedor:"+boxname+"/n nombre de clase activado:"+className);}, // El primer cuadro de selección obtiene la información getFirstelement: function () {var main = $ ('#'+this.main); $. get ("http://127.0.0.1:83/areas", {{{it: '},'}, '}, d/'}, ) opción = "<opción valor = ''> Seleccione </opción>"; var list = data.data; for (var key en list) {opción+= "<opción valor = '"+key+"'>"+list [key] .arename+"</opción>";} main.html (opción);}, 'jsonp');}}) (jQueryy) (jQueryTipo de datos proporcionado por el backend: JSON
Si hay datos: estado = 1
ejemplo:
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", Posición: "Tr_0", Sort: "2"} 130000: {id: "130000", Areaname: "Provincia Hebei", Pid: "0", ShortName: "Hebei", Level: "1", Position: "Tr_0", Sort: "3"} 140000: {Id: "140000", Areaname: "Shanxi Province", Piadt: Piad: Pid: Pid: Pid: Pid: Pid: Pid: Pid: Pid: Pid: Pid: PROVIn ", PiLOT: PITNE: PITN: PITNE: PITNE: PITN: PITNE: PITN: PITN: PITN: PITNE: PITING: PITN: PITN: PIDTO: PITIN "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: "Provincia de Liaoning", Pid: "0", corta: "Liaoning", nivel: "1", posición: "Tr_0", Sort: "6"} 220000: {id: "2200000", Areaname: "Jilin Province", Pid: "0", nombre: "Jilin", nivel: "1", posición: "Tr_0", ordenar: orden "7"} 230000: {id: "230000", areaname: "provincia de heilongjiang", pid: "0", shortname: "heilongjiang", nivel: "1", posición: "tr_0", sort: "8"} 310000: {id: "310000", arean: "Shanghai", pid:: ", Shanghai:" 0 ",", Shanghai ",", "0", Shanghai "," 0 ",", ",", ",", ",", "," 0 ", Shanghai", "0", ",", "0", ",", ",", ", Shanghai". nivel: "1", posición: "tr_0", sort: "9"} 320000: {id: "320000", areaname: "provincia de jiangsu", pid: "0", shortname: "jiangsu", nivel: "1", posición: "tr_0", sort: "10"} 330000: {{Id: "330000" ", arreye:" zhhejiM: "zhhej:" zhhej: "zhhej:". Provincia ", pid:" 0 ", corta:" zhejiang ", nivel:" 1 ", posición:" tr_0 ", sort:" 11 "} ......}, estado:" 1 "Si no hay estado de datos = 0
ejemplo:
Estado: "0"