HTML 부분
<! docType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> 다중 레벨 링크 캡슐화 </title> <link href = "./ css/bootstrap.css"rel = "stylesheet"> script src = " src = "./ duoji.js"> </script> </script> <div style = "margin : 100px auto;"> <div id = "box1"> </div> </div> <div style = "margin : 100px auto;"> <div> id = "box2"> </div> </div> <컨테이너 이름 (신약). 이름) $. select ( 'box1', 'area1'); $. select ( 'box2', 'area2'); </script> </body> </html>
duoji.js 코드
($) {$) {$ .select = 함수 (box, addInputClass) {var i = new select; return I.init (box, addinputClass)} // 다중 레벨 링크 메소드 클래스 var select = new function (); select.prototype = {// 클래스 속성 시작 : function, addinputClass) { '#'$ ( '$ box); // 요소를 추가 해야하는 컨테이너 this.eleclass = addInputClass; // 각 이벤트의 위치 classShis.first (); // get get}, first : function () {// 외부 변수 var boxname = this.boxname; var eleclass = this.eleclass; var; box; box; box; box; box; box; box; box; obj = this; $ value = '+key+"'>"+list [key] .Arename+"</옵션>";} $ ( '<div> <select name = "'+eleclass+'[]"num = "0"pnode = "'+boxname+'" cname = " '+eleclass+'"> '+옵션+'</select> </div> '). Appendto (box) .find ('select '). bind ('change ', function () {obj.change ($ (this)});},'jsonp ');}, // 이벤트 변경 : event) {// declare var BoxName = $ (event). attr ( 'pnode'); num = eleclass.index ($ (event))+1; num var id = $ (이벤트). //console.log(This) ent (). 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.0.0.0.0.1:83/areas", data : {id}, sync : // synchronous success로 설정 : function (data) {// console.log (데이터); = data.dataif (data.state === '1') {var 옵션 = "<옵션 값 = ''> </옵션>"; for (var key in list) {옵션+= "옵션 value = '+key+"'> "+list [key] .areaname+"</옵션> ";} $ ( '<div> <select name ="'+classname+'[ "" "" "+'". pnode = " '+boxname+'" "cname =" '+classname+' "> '+옵션+'</select> </div> '). 부록 (box) .find ('select '). bind ('change ', function () {obj.change (this)});}}});});}); BoxName = $ (event) .attr ( 'pnode'); // 트리거 클래스 이름 = $ ( 'cname'); // 트리거 이벤트를 가져옵니다 console.log ( "컨테이너 이름 :"+boxname+"/n 트리거 클래스 이름 :"+classname);}, // 첫 번째 선택 상자는 정보를 가져옵니다. 옵션 = "<옵션 값 = ''>를 선택하십시오 </옵션>"; var list = data.data; for (var key in list) {옵션+= "옵션 값 = '"+key+"'>"+list [key] .arename+"</옵션>";} main.html (옵션);}, 'jsonp');}} (JQuery).백엔드에서 제공 한 데이터 유형 : JSON
데이터가있는 경우 : state = 1
예:
데이터 : {110000 : {id : "110000", Areaname : "Beijing", PID : "0", ShortName : "Beijing", Level : "1", 위치 : "TR_0", "1"} 120000 : {id : "120000", AREANAME : "TIANJIN", PID : "0", "tianjin" 위치 : "tr_0", 정렬 : "2"} 130000 : {id : "130000", Areaname : "Hebei Province", "0", Shortname : "Hebei", Level : "1", "tr_0", "3"} 140000 : "id :"140000 ", Areaname :"Shanxi Provine : ", Pipince" "Shanxi", Level : "1", 위치 : "Tr_0", Sort : "4"} 150000 : {id : "150000", Areaname : "Inner Mongolia Autonomous 지역", Pid : "0", ShortName : "Inner Mongolia", "1", 위치 : "TR_0", 정렬 : "5"} 2100 : "2100 :"210 : "} "Liaoning Province", PID : "0", ShortName : "Liaoning", Level : "1", 위치 : "tr_0", 정렬 : "6"} 220000 : {id : "2200000", Areaname : "Jilin Province", PID : "0", ShortName : "Jilin", Level : "1", "Tr_", Sort. "7"} 230000 : {id : "230000", Areaname : "Heilongjiang Province", PID : "0", ShortName : "Heilongjiang", Level : "1", 위치 : "TR_0", 정렬 : "8"} 310000 : {id : "310000", AREANAME : "SHANGHAI :", "", ",", ",", ","Shanghai " 레벨 : "1", 위치 : "tr_0", 정렬 : "9"} 320000 : {id : "320000", Areaname : "Jiangsu Province", PID : "0", ShortName : "Jiangsu", 레벨 : "1", "tr_0", 정렬 : "10"} 330000 : {id : "330000 :"3300 : "3300 :"3300 : "3300 :"330000 : " 지방 ", PID :"0 ", ShortName :"Zhejiang ", 레벨 :"1 ", 위치 :"tr_0 ", 정렬 :"11 "}, 상태 :"1 "데이터 상태가없는 경우 = 0입니다
예:
상태 : "0"