Bootstrap unlimited classification jq expands the encapsulation version of the previous unlimited classification ~, Bootstrapjq

Bootstrap unlimited classification jq expands the encapsulation version of the previous unlimited classification ~, Bootstrapjq

HTML section

<! DOCTYPE html> 
 
Duoji. js Code
(Function ($) {$. select = function (config) {var I = new select; return I. init (config)} // declare var select = new Function (); select. prototype = {// define class attributes init: function (config) {/*** these are pre-defined attributes */this. boxName = 'box'; // container name this. className = 'region'; // locate class this for each event. url = '. /area. php '; // default options // this. classObj = $ (". "+ className); // locate the class Object for each event -- basically useless, so this is abolished. type = 'get'; // transmission mode this. dataType = 'json'; // use the jsonp method // unpack the configuration information to overwrite the preceding attribute for (var key in config) {this [key] = config [key]; // console. log (key + ':' + config [key] + 'this. key: '+ this. key);} // console. log (this. boxName); var boxName = this. boxName; this. box = $ ('#' + boxName); // The container to add the element // create this. create (); // create a new select get}, create: function () {// declare the external variable var boxName = this. boxName; var className = this. className; var box = this. box; var url = this. url; var obj = this; var type = this. type; var dataType = this. dataType; $. ajax ({type: type, dataType: dataType, url: url, data: {id: '0'}, sync: true, // sets the asynchronous mode success: function (data) {var option = "<option value =''> 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 = "' + className + '[]" num = "0" class = "form-control input-sm' + className + '">' + option + '</select> </div> '). appendTo (box ). find ('select '). bind ('change', function () {obj. change ($ (this)}) ;}}, // change event change: function (event) {// declare var box = this. box; // obtain all objects inserted into the box var className = this. className // obtain the className var classObj of the model = $ ('. '+ className); // obtain the element group where all classes are located. Here, pay attention to re-generate classObj because it is a dynamic var num = classObj. index ($ (event) + 1; // obtain the num value // console. log (classObj. index ($ (event); var id = $ (event ). val (); // get the header var obj = this for the ajax sending id; // this method var url = this. url; // url var type = this. type; // transmission mode var dataType = this. dataType; // data type // clear the newly added element classObj. each (function () {// console. log (event); // here this represents the eClass time span of a single object if ($ (this ). attr ('num')> $ (event ). attr ('num') {$ (this ). parent (). remove () ;}}); // loop ajax method $. ajax ({type: type, dataType: dataType, url: url, data: {id: id}, sync: true, // sets the asynchronous mode success: function (data) {// console. log (data); var list = data. data if (data. state = '1') {var option = "<option value =''> select </option> "; for (var key in list) {option + = "<option value = '" + key + "'>" + list [key]. areaname + "</option> ";} $ ('<div class = "col-md-2 pl0"> <select name = "' + className + '[]" num = "' + num + '" class = "form-control input-sm '+ className +' "> '+ option +' </select> </div> '). appendTo (box ). find ('select '). bind ('change', function () {obj. change (this)}) ;}}) ;}, // query information in the current box log: function () {var boxName =$ (event ). attr ('pnode'); // obtain the pnode var className of the trigger event =$ (event ). attr ('cname'); // obtain the cname var box of the trigger event =$ ("#" + boxName ); // obtain all objects inserted into the box var className = $ (". "+ className); // obtain the console of the element group of all classes. log ("container name:" + boxName + "\ n triggered class name:" + className) ;}}) (jQuery)
 
Data Type provided by the backend: json
If data exists: 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", 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 "}.....}, state: "1"
If no data exists, state = 0
Example:
state:"0"
 
Attached: instance yo ~ containing the php server ~
Http://pan.baidu.com/s/1i5DG70D