Partie HTML
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> Encapsulation de liaison multi-niveaux </title> <link href = "./ css / bootstrap.css" rel = "StyleSheet"> <script src = "./ js / jque src = "./ duoji.js"> </ script> <body> <div style = "margin: 100px auto;"> <div id = "box1"> </ div> </ div> <div style = "margin: 100px auto;"> <div> id = "box2"> </v> </v> <script> // nom de conteneur, nom de nom (newly génération (newly a généré la classe de nom (newly génération de nom de nom, nom de nom newyly Nom) $. SELECT ('Box1', 'Area1'); $. SELECT ('Box2', 'Area2'); </cript> </ody> </html>code duoji.js
(fonction ($) {$ .Select = fonction (box, addInputClass) {var i = new Select; return i.init (box, addInputClass)} // Déclare la méthode de liaison à plusieurs niveaux class var seclect = new function (); select.prototype = {// définir la classe attribut initRribute: function (box, addInputClass) {this.boxname = box; // Container qui doit ajouter des éléments this.eleclass = addInputClass; // emplacement de chaque classe d'événementsThis.First (); // Créer un nouveau sélectionné pour obtenir}, premier: fonction () {// Déclare la variable externe var boxname = this.boxname; var eleclass = this.eleclass; var box = this.box; var; var; obj = this; $. get ("http://127.0.0.1:83/areas", {id: '0'}, function (data) {var option = "<option value = ''> s'il vous plaît sélectionnez </ option>"; var list = data.data; for (var key in list) {option + = "<option + valeur = '"+ key +"'> "+ list [key] .arename +" </ option> ";} $ ('<div> <select name ="' + eleclass + '[] "num =" 0 "pnode ="' + boxname + '" cname = "'+ eleclass +'"> '+ option +' </lect> </div> '). apendto (box) .find (' select '). bind (' modifier ', function () {obj.change ($ (this))});},' jsonp ');}, // modifier l'événement: fonction (événement) {// disclare varv BoxName = $ (événement) .attr ('pnode'); num = //console.log($(this).attr('num')) ;//console.log($().ATTR('NUM' )) ;IF($(TISHIS).ATTR('NUM') ent (). retire ();}}); / * 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 synchronous réussi =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 +' "> '+ option +' </lect> </div> '). apendto (box) .find (' select '). bind (' change ' BoxName = $ (événement) .attr ('pnode'); console.log ("Nom du conteneur:" + BoxName + "/ n Nom de classe déclenchée:" + className);}, // La première boîte de sélection obtient les informations getFirstelement: function () {var main = $ ('#' + this.main); $. option = "<option value = ''> s'il vous plaît sélectionnez </ option>"; var list = data.data; for (clés var dans la liste) {option + = "<option value = '" + key + "' '>" + list [key] .arename + "</ option>";} main.html (option);},' JSONP ');}}}) (jQQuery)Type de données fourni par le backend: JSON
S'il y a des données: état = 1
exemple:
Données: {110000: {id: "110000", aaname: "beijing", pid: "0", shortname: "beijing", niveau: "1", position: "tr_0", tri: "1"} 120000: {id: "120000", araname: "Tianjin", pid: "0", shortname: "Tianjin," 1 ", pid:" 0 " Position: "tr_0", tri: "2"} 130000: {id: "130000", aaname: "province de Hebei", pid: "0", shortname: "hebei", niveau: "1", position: "tr_0", sort: "3"} 140000: {id: "140000", areaname: "shanxi province" "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: "Liaoning Province", pid: "0", shortname: "liaoning", niveau: "1", position: "tr_0", tri: "6"} 220000: {id: "2200000", aanin: "Jilin Province", pid: "0", shortname: "Jilin", niveau: "1", position: "tr_0", Sorting: "7"} 230000: {id: "230000", aaname: "Heilongjiang Province", pid: "0", shortname: "HeilongJiang", niveau: "1", position: "tr_0", tri: "8"} 310000: {id: "310000" Niveau: "1", position: "tr_0", tri: "9"} 320000: {id: "320000", areaname: "Jiangsu province", pid: "0", shortname: "Jiangsu", niveau: "1" Province ", pid:" 0 ", shortname:" zhejiang ", niveau:" 1 ", position:" tr_0 ", tri:" 11 "} ......}, état:" 1 "S'il n'y a pas d'état de données = 0
exemple:
État: "0"