zoukankan      html  css  js  c++  java

  • JavaScript 联动的封装类,不管几级都可以,数据采用非Ajax方式,随意添加联动

    Html代码 
    1. <html>  
    2. <head>  
    3.   <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />  
    4.   <title>试试</title>  
    5. </head>  
    6.   
    7. <script type="text/javascript">  
    8. var data = {  
    9.   '1' : 'a001',  
    10.   '2' : 'a002',  
    11.   '3' : 'a003',  
    12.   '4' : 'a004',  
    13.   '5' : 'a005',  
    14.   '6' : 'a006'  
    15. };  
    16.   
    17. var data2 = {  
    18.   '1' : { '101' : 'a101', '102' : 'a102', '103' : 'a103', '104' : 'a104' },  
    19.   '2' : { '201' : 'a201', '202' : 'a202', '203' : 'a203', '204' : 'a204' },  
    20.   '3' : { '301' : 'a301', '302' : 'a302', '303' : 'a303', '304' : 'a304' },  
    21.   '4' : { '401' : 'a401', '402' : 'a402', '403' : 'a403', '404' : 'a404' },  
    22.   '5' : { '501' : 'a501', '502' : 'a502', '503' : 'a503', '504' : 'a504' },  
    23.   '6' : { '601' : 'a601', '602' : 'a602', '603' : 'a603', '604' : 'a604' },  
    24.   '101' : { '10101' : 'a10101', '10102' : 'a10102', '10103' : 'a10103', '10104' : 'a10104' },  
    25.   '102' : { '10201' : 'a10201', '10202' : 'a10202', '10203' : 'a10203', '10204' : 'a10204' },  
    26.   '103' : { '10301' : 'a10301', '10302' : 'a10302', '10303' : 'a10303', '10304' : 'a10304' },  
    27.   '104' : { '10401' : 'a10401', '10402' : 'a10402', '10403' : 'a10403', '10404' : 'a10404' },  
    28.   '201' : { '20101' : 'a20101', '20102' : 'a20102', '20103' : 'a20103', '20104' : 'a20104' },  
    29.   '202' : { '20201' : 'a20201', '20202' : 'a20202', '20203' : 'a20203', '20204' : 'a20204' },  
    30.   '203' : { '20301' : 'a20301', '20302' : 'a20302', '20303' : 'a20303', '20304' : 'a20304' },  
    31.   '204' : { '20401' : 'a20401', '20402' : 'a20402', '20403' : 'a20403', '20404' : 'a20404' },  
    32.   '301' : { '30101' : 'a30101', '30102' : 'a30102', '30103' : 'a30103', '30104' : 'a30104' },  
    33.   '302' : { '30201' : 'a30201', '30202' : 'a30202', '30203' : 'a30203', '30204' : 'a30204' },  
    34.   '303' : { '30301' : 'a30301', '30302' : 'a30302', '30303' : 'a30303', '30304' : 'a30304' },  
    35.   '304' : { '30401' : 'a30401', '30402' : 'a30402', '30403' : 'a30403', '30404' : 'a30404' },  
    36.   '401' : { '40101' : 'a40101', '40102' : 'a40102', '40103' : 'a40103', '40104' : 'a40104' },  
    37.   '402' : { '40201' : 'a40201', '40202' : 'a40202', '40203' : 'a40203', '40204' : 'a40204' },  
    38.   '403' : { '40301' : 'a40301', '40302' : 'a40302', '40303' : 'a40303', '40304' : 'a40304' },  
    39.   '404' : { '40401' : 'a40401', '40402' : 'a40402', '40403' : 'a40403', '40404' : 'a40404' },  
    40.   '501' : { '50101' : 'a50101', '50102' : 'a50102', '50103' : 'a50103', '50104' : 'a50104' },  
    41.   '502' : { '50201' : 'a50201', '50202' : 'a50202', '50203' : 'a50203', '50204' : 'a50204' },  
    42.   '503' : { '50301' : 'a50301', '50302' : 'a50302', '50303' : 'a50303', '50304' : 'a50304' },  
    43.   '504' : { '50401' : 'a50401', '50402' : 'a50402', '50403' : 'a50403', '50404' : 'a50404' },  
    44.   '601' : { '60101' : 'a60101', '60102' : 'a60102', '60103' : 'a60103', '60104' : 'a60104' },  
    45.   '602' : { '60201' : 'a60201', '60202' : 'a60202', '60203' : 'a60203', '60204' : 'a60204' },  
    46.   '603' : { '60301' : 'a60301', '60302' : 'a60302', '60303' : 'a60303', '60304' : 'a60304' },  
    47.   '604' : { '60401' : 'a60401', '60402' : 'a60402', '60403' : 'a60403', '60404' : 'a60404' }  
    48. };  
    49.   
    50. window.$ = function(id) {  
    51.   if(typeof id == 'string') {  
    52.     return document.getElementById(id);  
    53.   }  
    54.   return id;  
    55. }  
    56.   
    57. /**  
    58.  * 事件处理工具类  
    59.  *  
    60.  * @author bao110908  
    61.  */  
    62. var Event = function(){}  
    63.   
    64. Event = {  
    65.   
    66.   /**  
    67.    * 为 element 使用 handler 处理程序添加至 event 事件  
    68.    * 兼容 IE 及 Firefox 等浏览器  
    69.    *  
    70.    * 例如为 botton 对象添加 onclick 事件，使用 clickEvent  
    71.    * 方法作为处理程序：  
    72.    *   Event.addEvent(botton, 'click', clickEvent);  
    73.    *  
    74.    * @param element  需要添加事件的对象（Object）  
    75.    * @param event    需要添加的事件名称（String），不加“on”  
    76.    * @param handler  需要添加的方法引用（Function）  
    77.    */  
    78.   addEvent : function(element, event, handler) {  
    79.     if(element.attachEvent) {  
    80.       element.attachEvent('on' + event, handler);  
    81.     } else if (element.addEventListener) {  
    82.       element.addEventListener(event, handler, false);  
    83.     } else {  
    84.       element['on' + event] = handler;  
    85.     }  
    86.   },  
    87.   
    88.   /**  
    89.    * 添加事件处理程序时，只能添加一个方法的引用，并不能给  
    90.    * 方法加上参数。比如定义了 clickEvent(str) 这个方法，现  
    91.    * 在要将其作为 obj 的 onclick 的事件处理程序，就可以用：  
    92.    * obj.onclick = Event.getFuntion(null, clickEvent, str);  
    93.    */  
    94.   getFunction : function(obj, fun) {  
    95.     var args = [];  
    96.     objobj = obj || window;  
    97.     for(var i = 2; i < arguments.length; i++) {  
    98.       args.push(arguments[i]);  
    99.     }  
    100.     return function() {  
    101.         fun.apply(obj, args);  
    102.       };  
    103.   }  
    104. }  
    105.   
    106. /**  
    107.  * 联动处理类  
    108.  *  
    109.  * @param first   第一个 select 的 ID  
    110.  * @param second  第二个 select 的 ID  
    111.  * @param dataSet 第二个 select 的数据  
    112.  *  
    113.  * @author bao110908  
    114.  */  
    115. var Linkage = function(first, second) {  
    116.   this.first = $(first);  
    117.   this.second = $(second);  
    118. }  
    119.   
    120. /**  
    121.  * 初始化第一个 select 的数据  
    122.  */  
    123. Linkage.initFirst = function(first, dataSet) {  
    124.   var base = $(first);  
    125.   base.options.length = 1;  
    126.   for(var k in dataSet) {  
    127.     var opt = new Option(dataSet[k], k);  
    128.     base.options[base.options.length] = opt;  
    129.   }  
    130. }  
    131.   
    132. Linkage.prototype = {  
    133.   
    134.   // 初始化  
    135.   init : function() {  
    136.     this.addOnChange();  
    137.   },  
    138.   
    139.   // 为第一个 select 添加 onchange 事件  
    140.   addOnChange : function() {  
    141.     Event.addEvent(this.first, 'change', Event.getFunction(this, this._onChangeEvent));  
    142.   },  
    143.   
    144.   // onchange 事件处理  
    145.   _onChangeEvent : function() {  
    146.     this._defaultSelect();  
    147.     var data = this._getData(this.first.value);  
    148.     if(!data) {  
    149.       return;  
    150.     }  
    151.     this.second.options.length = 1;  
    152.     for(var k in data) {  
    153.       var opt = new Option(data[k], k);  
    154.       this.second.options[this.second.options.length] = opt;  
    155.     }  
    156.   },  
    157.   
    158.   // 获取数据，如果采用 Ajax 方式，需要进行更改  
    159.   // Ajax 应返回 { '101' : {'101' : 'a101', '102', 'a102' }} 这样的数据格式  
    160.   // 然后再使用 eval('(' + ajaxData + ')'); 转为 JSON 对象  
    161.   _getData : function(value) {  
    162.     return data2[value];  
    163.   },  
    164.   
    165.   // 重新选择时的处理  
    166.   _defaultSelect : function() {  
    167.     this.second.selectedIndex = 0;  
    168.     this.second.options.length = 1;  
    169.     if(this.second.fireEvent) {  
    170.       // IE  
    171.       this.second.fireEvent('onchange');  
    172.     } else {  
    173.       // DOM 2  
    174.       var event = document.createEvent('HTMLEvents');  
    175.       event.initEvent('change', false, true);  
    176.       this.second.dispatchEvent(event);  
    177.     }  
    178.   }  
    179. }  
    180.   
    181. window.onload = function() {  
    182.   Linkage.initFirst('base1', data);  
    183.   var one = new Linkage('base1', 'base2');  
    184.   one.init();  
    185.   var two = new Linkage('base2', 'base3');  
    186.   two.init();  
    187. }  
    188. </script>  
    189.   
    190. <style type="text/css">  
    191. * {  
    192.   font-size: 12px;  
    193.   font-family: "courier new";  
    194. }  
    195. select {  
    196.    120px;  
    197. }  
    198. </style>  
    199.   
    200.   
    201. <body>  
    202.   一级：<select name="base1" id="base1"><option value="0">-- 请选择 --</option></select>  
    203.   &nbsp;  
    204.   二级：<select name="base2" id="base2"><option value="0">-- 请选择 --</option></select>  
    205.   &nbsp;  
    206.   三级：<select name="base3" id="base3"><option value="0">-- 请选择 --</option></select>  
    207. </body>  
    208. </html>  




    Js代码 
    1. var one = new Linkage('base1', 'base2', data2);  
    2.   one.init();  
    3.   var two = new Linkage('base2', 'base3', data3);  
    4.   two.init();  
    5.   
    6. //每增加一级联动，就要 new 一下就可以了  
  • 相关阅读:
    golang包引用解析
    解决vs code中golang插件依赖安装失败问题
    设计模式之策略模式
    设计模式之模板方法
    设计模式——面向对象设计原则
    设计模式——个人浅谈
    Sublime Text3配置Lua运行环境
    Ntrip协议使用流程及服务器实现架构
    python3解析库lxml
    python3爬虫之Urllib库（二）
  • 原文地址：https://www.cnblogs.com/top5/p/1766552.html
Copyright © 2011-2022 走看看