HTML Part
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <Title> Многоуровневая инкапсуляция сцепления </title> <link href = "./ css/bootstrap.cs" rel = "stylesheet"> <cript src = "./ js/js/jquery. 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 Имя) $. SELECT ('Box1', 'Quee1'); $. SELECT ('Box2', 'rea2'); </script> </body> </html>Duoji.js Code
(function ($) {$. Select = function (box, addInputClass) {var i = new Select; return i.init (box, addInputClass)} // Объявит класс метода многоуровневого сцепления var select = new function (); select.prototype = {// define атрибут класса init: function (box, addpusclass) {это. // Контейнер, который необходимо добавить элементы this.eleclass = addInputClass; // местоположение каждого события classThis.first (); // Создать новый Select to get}, first: function () {// Объявление внешней переменной var boxnam obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, function (data) {var option = "<varue value = ''> Пожалуйста, выберите </option>"; value = '"+key+"'> "+list [key] .Arename+" </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 ');}, // изменение изменения: function) {/ declare varc BoxName = $ (Event) .attr ('pnode'); num = eleclass.index ($ (event))+1; //console.log($( Это).attr('num'));//console.log($().attr('num'));if($( Это).attr('num')> $(Event).attr('num')) ent (). remove ();}});/*console.log (boxname); console.log (classname); console.log ($ (event)); console.log ($ (event) .val ());*/// петля Ajax Method $ .ajax ({type: «get», Datatype: «jsonp», url: «http://127.0.0.1:83/areas", data: {id: id}, sync: false, // set to synchrony success: function (data) {// console.log (data); = data.dataif (data.state === '1') {var option = "<option value = ''> Пожалуйста, выберите </option>"; for (var in list) {option+= "<valie = '"+key+">"+list [key] .areAname+"</option>";} $ (' <div> <selet name = "'+classname+" [/option> "; pnode = "'+boxname+'" "cname =" '+classname+' "> '+option+' </select> </div> '). Appendto (box) .find (' select '). Bind (' rave ', function () {obj.Change (this)});}}});};}, // Query in the Comploge in the Commanie in thecove in the Comploge ()}); Boxname = $ (Event) .attr ('pnode'); console.log ("Имя контейнера:"+boxname+"/n именем класса:"+classname);}, // Первое поле выбора получает информацию getFirstelement: function () {var main = $ ('#'+this.main); $. опция = "<vition value = ''> Пожалуйста, выберите </option>"; var list = data.data; for (var in list) {option+= "<option value = '"+key+"'>"+list [key] .Arename+"</option>";} main.html (опция);}, 'jsonp');}}}) (jquer);Тип данных, предоставленный бэкэнд: JSON
Если есть данные: состояние = 1
пример:
Данные: {110000: {id: «110000», AreAname: «Пекин», PID: «0», ShortName: «Пекин», уровень: «1», позиция: «tr_0», Sort: «1»} 120000: {id: «120000», AREANAME: «Tianjin», PID: »,« THEINAMEN »:« TREAN -»:« TREAN -»:« TEIANJIN »:« TEIAIN »:« TEIAIN -»:« TREANJIN »: Позиция: «tr_0», Sort: «2»} 130000: {id: «130000», AreAname: «провинция Хейбей», PID: «0», ShortName: «Hebei», уровень: «1», позиция: «tr_0», Sort: «3»} 140000: {id: «140000», AreAname: «Shanxi provin». ShortName: «Shanxi», уровень: «1», позиция: «tr_0», Sort: «4»} 150000: {id: «150000», AreAname: «Внутренняя Монголия Автономная область», PID: «0», ShortName: «Inner Mongolia», уровень: «1», позиция: «TR_0», сортировка: «5» at.1100: at1100: at100: at100: at100: at100: at1100: at1100: at1100: at1100: at1100: at1100: й ». AreAname: «провинция Liaoning», Pid: «0», ShortName: «Liaoning», уровень: «1», позиция: «tr_0», Sort: «6»} 220000: {id: «2200000», AreAname: «Jilin Province», PID: «0», ShortName: «Jilin», «Level»: «1". "7"} 230000: {id: "230000", AreAname: "Heilongjiang Province", PID: "0", ShortName: "Heilongjiang", уровень: "1", позиция: "tr_0", сортировка: "8"} 310000: {id: "310000", AREaname: "Shanghai", Pidn ":". «Шанхай», уровень: «1», позиция: «tr_0», sort: «9»} 320000: {id: «320000», Areaname: «провинция Цзянсу», PID: «0», ShortName: «jiangsu», уровень: «1», позиция: «TR_0», сортировка: »} 3300: {ID:« ID »: {ID:« ID ». AreAname: «провинция Чжэцзян», PID: «0», ShortName: «Zhejiang», уровень: «1», позиция: «tr_0», Sort: «11»} ......}, состояние: «1»Если нет состояния данных = 0
пример:
состояние: "0"