JavaScript 연결을 위한 무한 수준 캡슐화 클래스, 데이터는 Ajax가 아닌 방법을 사용, will_javascript 기술에 연결 추가

html 코드

코드 복사 코드는 다음과 같습니다. 试试 var data = { '1' : 'a001', '2' : 'a002', '3' : 'a003', '4' : 'a004' , '5' : 'a005', '6' : 'a006' }; var data2 = { '1' : { '101' : 'a101', '102' : 'a102', '103' : 'a103', '104' : 'a104' }, '2' : { '201' : 'a201', '202' : 'a202', '203' : 'a203', '204' : 'a204' }, '3' : { '301' : 'a301', '302' : 'a302', '303' : 'a303', '304' : 'a304' }, '4' : { '401' : 'a401', '402' : 'a402', '403' : 'a403', '404' : 'a404' }, '5' : { '501' : 'a501', '502' : 'a502', '503' : ' a503', '504' : 'a504' }, '6' : { '601' : 'a601', '602' : 'a602', '603' : 'a603', '604' : 'a604 ' }, '101' : { '10101' : 'a10101', '10102' : 'a10102', '10103' : 'a10103', '10104' : 'a10104' }, '102' : { '10201' : 'a10201', '10202' : 'a10202', '10203' : 'a10203', '10204' : 'a10204' }, '103' : { '10301' : 'a10301' , '10302' : 'a10302', '10303' : 'a10303', '10304' : 'a10304' }, '104' : { '10401' : 'a10401', '10402' : 'a10402', '10403' : 'a10403', '10404' : 'a10404' }, '201' : { '20101' : 'a20101', '20102' : 'a20102', '20103' : 'a20103', ' 20104' : 'a20104' }, '202' : { '20201' : 'a20201', '20202' : 'a20202', '20203' : 'a20203', '20204' : 'a20204' }, '203' : { '20301' : 'a20301', '20302' : 'a20302', '20303' : 'a20303', '20304' : 'a20304' }, '204' : { '20401 ' : 'a20401', '20402' : 'a20402', '20403' : 'a20403', '20404' : 'a20404' }, '301' : { '30101' : 'a30101', '30102' : 'a30102', '30103' : 'a30103', '30104' : 'a30104' }, '302' : { '30201' : 'a30201', '30202' : 'a30202', '30203' : 'a30203', '30204' : 'a30204' }, '303' : { '30301' : 'a30301', '30302' : 'a30302', '30303' : 'a30303', '30304' : ' a30304' }, '304' : { '30401' : 'a30401', '30402' : 'a30402', '30403' : 'a30403', '30404' : 'a30404' }, '401 ' : { '40101' : 'a40101', '40102' : 'a40102', '40103' : 'a40103', '40104' : 'a40104' }, '402' : { '40201' : 'a40201 ', '40202' : 'a40202', '40203' : 'a40203', '40204' : 'a40204' }, '403' : { '40301' : 'a40301', '40302' : 'a40302' , '40303' : 'a40303', '40304' : 'a40304' }, '404' : { '40401' : 'a40401', '40402' : 'a40402', '40403' : 'a40403', '40404' : 'a40404' }, '501' : { '50101' : 'a50101', '50102' : 'a50102', '50103' : 'a50103', '50104' : 'a50104' }, '502' : { '50201' : 'a50201', '50202' : 'a50202', '50203' : 'a50203', '50204' : 'a50204' }, '503' : { ' 50301' : 'a50301', '50302' : 'a50302', '50303' : 'a50303', '50304' : 'a50304' }, '504' : { '50401' : 'a50401', '50402 ' : 'a50402', '50403' : 'a50403', '50404' : 'a50404' }, '601' : { '60101' : 'a60101', '60102' : 'a60102', '60103' : 'a60103', '60104' : 'a60104' }, '602' : { '60201' : 'a60201', '60202' : 'a60202', '60203' : 'a60203', '60204' : 'a60204' }, '603' : { '60301' : 'a60301', '60302' : 'a60302', '60303' : 'a60303', '60304' : 'a60304' }, ' 604' : { '60401' : 'a60401', '60402' : 'a60402', '60403' : 'a60403', '60404' : 'a60404' } }; window.$ = function(id) { if(typeof id == 'string') { return document.getElementById(id); } ID 반환; } /** * 이벤트 처리 도구 클래스 * * @author bao110908 */ var Event = function(){} Event = { /** * 이벤트 이벤트에 추가하려면 요소에 대한 핸들러 핸들러를 사용하십시오. * IE 및 Firefox와 같은 브라우저와 호환됩니다. * * 예를 들어 botton 객체에 onclick 이벤트를 추가하려면 clickEvent를 사용하십시오. * 프로그램 처리 메소드: * Event.addEvent(botton, 'click', clickEvent) * * @param 요소 추가해야 할 이벤트의 객체(Object) * @param event 추가해야 할 이벤트 이름(String), "on" 없음 * 추가할 @param 핸들러 메서드 참조(Function) */ addEvent : function( 요소, 이벤트, 핸들러) { if(element.attachEvent) { element.attachEvent('on' 이벤트, 핸들러); } else if (element.addEventListener) { element.addEventListener(event, handler, false); } else { 요소['on' 이벤트] = 핸들러; } }, /** * 添加事件处理程序时，只能添加一个方法的引用，并不能给 * 方法加上参数。예를 들어, clickEvent(str) 메소드를 정의하고 이제 * 이를 obj의 onclick 이벤트 핸들러로 사용하려는 경우 다음을 사용할 수 있습니다. * obj.onclick = Event.getFuntion(null, clickEvent , str) ; */ getFunction : function(obj, fun) { var args = []; obj = obj || window; i args.push(arguments[i]); } return function() { fun.apply(obj, args); }; } } /** * 링크 처리 클래스 * * @param first 첫 번째 선택의 ID * @param second 두 번째 선택의 ID * @param dataSet 두 번째 선택의 데이터 * * @author bao110908 */ var Linkage = function(first, second) { this.first = $(first); .second = $(초); } /** * 첫 번째 선택 데이터 초기화 */ Linkage.initFirst = function(first, dataSet) { var base = $(first); >base.options.length = 1; for(var k in dataSet) { var opt = new Option(dataSet[k], k) base.options[base.options.length] = 선택; } } Linkage.prototype = { // 초기화 init : function() { this.addOnChange()}, // 첫 번째 선택에 대한 onchange 이벤트 추가 addOnChange: function() { Event.addEvent(this.first, 'change', Event.getFunction(this, this._onChangeEvent)) } , // onchange 이벤트 처리 _onChangeEvent: function() { this._defaultSelect() var data = this._getData(this.first.value) if(! data) { return; } this.second.options.length = 1 for(var k in data) { var opt = new Option(data[k], k) ; this.second.options[this.second.options.length] = opt; } }, // 데이터 가져오기, Ajax를 사용하는 경우 변경해야 함 / / Ajax는 { '101' : {'101' : 'a101', '102', 'a102' }} 이러한 데이터 형식을 반환해야 합니다. // 그런 다음 eval('(' ajaxData ')')를 사용하세요. ; JSON 객체로 변환 _getData : function(value) { return data2[value] }, // 재선택 시 처리 _defaultSelect : function() { this .second.selectedIndex = 0; this.second.options.length = 1; if(this.second.fireEvent) { // IE this.second.fireEvent('onchange' ); } else { // DOM 2 var event = document.createEvent('HTMLEvents') event.initEvent('change', false, true); .second.dispatchEvent(event); } } } window.onload = function() { Linkage.initFirst('base1', data) var one = new Linkage('base1', 'base2'); one.init(); var two = new Linkage('base2', 'base3') two.init(); 🎜>} * { 글꼴-크기: 글꼴-가족: "courier new "; } select { width: 120px; } 레벨 1: -- 선택하세요--

레벨 2: -- 선택하세요--

레벨 3: -- 선택하세요-- </html&gt ;

Js 코드

코드 복사

코드는 다음과 같습니다. var one = new Linkage('base1', 'base2', data2); one.init() var two = new Linkage('base2', 'base3', data3); >two .init();//추가 연결 수준마다 new 를 사용하세요.

JavaScript 연결을 위한 무한 수준 캡슐화 클래스, 데이터는 Ajax가 아닌 방법을 사용, will_javascript 기술에 연결 추가

관련 기사