Bootstrap Infinite Class (infinite Pole Classification package edition) _jquery

HTML section

<! DOCTYPE html>
 
 

Duoji.js Code

(function ($) {$.select=function (box,addinputclass) {var i=new select; return I.init (Box,addinputclass)}//Declaration multilevel Linkage Method Class V
AR select = new Function ();
select.prototype={//Definition class attributes Init:function (Box,addinputclass) {this.boxname=box; this.box=$ (' # ' +box);//containers to add elements this.eleclass=addinputclass;//each event's location class This.first ()//Create a new Select Fetch}, First:function () {//Declare the external variable var boxname=
This.boxname;
var eleclass= this.eleclass;
var Box=this.box;
var obj=this; $.get ("Http://127.0.0.1:83/areas", {ID: ' 0 '}, function (data) {var option= ' <option value= ' > Please select </option>
;
var list=data.data; for (var key in list) {option+= ' <option value= ' +key+ ' ' > ' +list[key].areaname+ ' </option> ';} $ (' <div class= "Col-md-2 pl0" ><select name= "+eleclass+" [] "num=" 0 "pnode=" ' +boxname+ ' "cname=" ' +eleclass+ ' "class=" Form-control input-sm ' +eleclass+ ' "> ' +option+ ' </select></div> '). Appendto (Box). Find (' select '). Bind
(' Change ', function () {Obj.change ($ (This))});
}, ' Jsonp '); },//change incident chaNge:function (Event) {//DECLARE var boxname=$ (event). attr (' Pnode ');//Get the Pnode var classname=$ (event) that triggers the event. attr (' cname '); /Get the CNAME var box =$ ("#" +boxname) that triggers the event; Gets all the objects inserted into the box var eleclass=$ (".") +classname); Gets the element group Var num=eleclass.index ($ (event) +1) for all class; Gets the value of num var id=$ (event). Val (); Get Ajax Send ID's head var obj=this; On behalf of this method//clears subsequent additions to the new element Eleclass.each (function () {//here represents the Eleclass traversal of a single object//console.log ($ (this). attr (' num '));
Console.log ($ (). attr (' num '));
if ($ (this). attr (' num ') >$ (event). attr (' num ')) {$ (this). Parent (). remove ();}});
/* Console.log (Boxname);
Console.log (ClassName);
Console.log ($ (event));
Console.log ($ (event). Val ()); //Loop Ajax method $.ajax ({type: "Get", DataType: "Jsonp", url: "Http://127.0.0.1:83/areas", data: {id:id}, sync:false,//set to same Step success:function (data) {//console.log (data); var list =data.data if (data.state=== ' 1 ') {var option= "<option value="
' > Please choose </option> '; for (var key in list) {option+= "<option value=" "+key+" ' > "+list[key].areaname+" &lT;/option> "; } $ (' <div class= "col-md-2 pl0" ><select name= "' +classname+ ' []" num= "' +num+ '" pnode= "' +boxname+ '" cname= "' + Classname+ ' "class=" Form-control input-sm ' +classname+ ' "> ' +option+ ' </select></div> '). Appendto (Box)
. Find (' select '). Bind ("Change", function () {Obj.change (This)});
}
}
}); ///Query the information in the current box log:function () {var boxname=$ (event). attr (' Pnode ');//Get the Pnode var classname=$ (event) that triggers the event. attr (' CNAME ');//Get the CNAME var box =$ that triggers the event ("#" +boxname); Gets all the objects inserted into the box var eleclass=$ (".") +classname); Gets the group Console.log ("container name:" +boxname+) of the element groups in which all classes are fired: "+classname);},///First select box to get information getfirstelement: function () {var main=$ (' # ' +this.main); $.get ("Http://127.0.0.1:83/areas", {ID: ' 0 '}, function (data) {var option= <
Option Value= ' > Please choose </option> ';
var list=data.data; for (var key in list) {option+= ' <option value= ' +key+ ' ' > ' +list[key].areaname+ ' </option> ';} main.html (
option);
}, ' Jsonp '); }}) (JQuery)

Data types provided by backend: JSON

If there is data: state=1

Example:

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", AR Eaname: "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", SH  Ortname: "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: "220000", AreaName: "Jilin Province", PID: "0", ShortName: "Jilin", Level: "1", PO Sition: "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 ", Sort:" 9 "} 32 0000:{id: "320000", areaName: "Jiangsu Province", pid: "0", ShortName: "Jiangsu", Level: "1", Position: "Tr_0", Sort: "Ten"} 330000:{id: "330000", AreaName: "Zhejiang Province", p ID: "0", ShortName: "Zhejiang", Level: "1", Position: "Tr_0", Sort: "One"}, State: "1"

If there is no data state=0

Example:

State: "0"