Parte html
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> encapsulamento de ligação de vários níveis </ititle> <link href = "/ css/bootstrap.css "rellesheet"> <cripts src =. src = "./ duoji.js"> </sCript> <body> <div style = "margem: 100px auto;"> <div id = "box1"> </div> </div> <div style = "margin: 100px auto;"> <div> ídhe ", box2"> </Div> </script <script> <script> Nome) $. Selecione ('Box1', 'Area1'); $. Select ('Box2', 'Area2'); </script> </body> </html>Código duoji.js
(function ($) {$ .Select = function (caixa, addInputClass) {var i = new Select; return i.init (caixa, addInputClass)} // Declare o método de link de nível múltiplo = classe select = new Function.); select.protype = {// define o attributo da classe init: function (box,,, addInput) {///xin; // contêiner que precisa adicionar elementos this.EleClass = addinputclass; // Localização de cada evento ClassThis.first (); // Crie uma nova seleção para obter}, primeiro: function () {// Declare a variável externa var boxName = this.boxname; var eleclass = this.Eleclass; var boxname; obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, function (data) {var option = "<opção value = '' '> selecione </pption>"; var list = Data.data; para (var chave na lista) {option+= "< value = '' "+key+" '> "+list [key] .arename+" </option> ";} $ (' <div> <select name =" '+eleclass+' [] "num =" 0 "pnode =" '+boxname+' "" cname = "'+eleclass+'"> '+option+' </leclect> </div> '). AppendTo (caixa) .find (' select '). bind (' alteração ', function () {obj.change ($ (this))});},' jsonp ');}, // alteração de evento: funcionar (event) {); BoxName = $ (Evento) .Attr ('PNODE'); num = eleclass.index ($ (evento)+1; //console.log($(this).attr('num'iChi.); Ent (). Remow ();}});/*console.log (boxname); console.log (classe); console.log ($ (event)); console.log ($ (event) .val ());*/// loop Método AJAX $ .AJAX ({TIPO: "Get", Datatype: "JSONP", URL: "http://127.0.0.1:83/areas",data: {id: id}, sync: false, // Set to Synch Scelt: function (Data) {/ Console.G = data.dataif (data.state === '1') {var option = "<opção value = ''> selecione </option>"; para (var tecla var na lista) {opção+= "<option value = '"+key+"'>" "+list [keeaname+" </option> ";} $ ('<div>> <dr> <divm <s)+list [keeaname+" </option> "; pnode = "'+boxname+'" "cname =" ''+className+'">'+option+'</select> </div>'). AppendTo (caixa) .Find ('Select'). BoxName = $ (Evento) .Attr ('PNODE'); console.log ("Nome do contêiner:"+BoxName+"/n Nome da classe desencadeada:"+className);}, // A primeira caixa de seleção obtém as informações getFirstElement: function () {var main = $ ('#'+this.main); $. option="<option value=''>Please select </option>";var list=data.data;for(var key in list){option+="<option value='"+key+"'>"+list[key].arename+"</option>";}main.html(option);},'jsonp');}}})(jQuery)Tipo de dados fornecido pelo back -end: JSON
Se houver dados: estado = 1
exemplo:
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"}210000:{id: "210000", areaname: "Província de Liaoning", PID: "0", ShortName: "Liaoning", nível: "1", posição: "Tr_0", Sort: "6"} 220000: {id: "2200000", Areaname: "Jilin Province", Pid: "0", ShortName: "Jilin", Nível: "Jilin", "Jilin", PID: "0". "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", Nível: "1", Posição: "Tr_0", Sort: "9"} 320000: {id: "320000", Areanome: "Província de Jiangsu", PID: "0", shortName: "Jiangsu",: Província ", pid:" 0 ", shortname:" zhejiang ", nível:" 1 ", posição:" tr_0 ", classificação:" 11 "} ......}, estado:" 1 "Se não houver estado de dados = 0
exemplo:
estado: "0"