下拉列表

自己封装的一个模拟下拉列表的插件

 

simSelect”下拉列表

简述：

通过使用simSelect可以实现由传统HTML模拟类似于原生select标签的功能。

主要是解决select标签样式在不同浏览器中的兼容性问题。

通过模拟，使用者便可以完全自定义下拉列表的样式。

该工具主要有以下几种功能：

• 结合表单提交，使用者可以自定义表单控件的name值。
• 可以适用于多级联动的情况。
• 支持带参数的回调功能。

结构：

　　通过使用simSelect，可以在指定的dom对象内生成一个模拟的结构，这个模拟的HTML结构详细内容如下：

　　dom

　　　　|- em 　　　　　　-> 用于显示使用者选中的结果。

　　　　|- span 　　　　    -> 下来列表的三角形箭头。

　　　　|- input:hidden     -> 结合表单提交的表单控件。

　　　　|-ul 　　　　　　    -> 用于展示生成的下拉列表选项。

　　　　　　|- li 　　　　    -> 每一个下来列表选项。

具体代码：

  1 ;(function(root){
  2 
  3     var UlBox = [];   // 定义一个堆栈，压入所有的UL。
  4     function hideUl(){    //对着整个文档单击或右击时的处理函数。
  5         for(var i=0;i<UlBox.length;i++){   //循环所有的UL，来进行关闭
  6             UlBox[i].style.display="none";
  7             UlBox[i].flag = true;
  8         }
  9     }
 10 
 11     document.οnclick=hideUl;
 12     document.οncοntextmenu=hideUl;
 13 
 14     function simSelect(param){
 15 
 16         this.oBox = param.dom || null;
 17         this.data = (param.data)?param.data:[];
 18         this.fn = param.fn || null;
 19         this.name = param.name || '';
 20         this.config = [];
 21         this.oBox && this.init();
 22         this.oBox && this.core();
 23 
 24     }
 25 
 26     simSelect.prototype.init=function(){
 27 
 28         var a = [];
 29 
 30         this.ul = document.createElement('ul');
 31         this.cnt = document.createElement('em');
 32         this.mark = document.createElement('span');    
 33         this.inp = document.createElement('input');
 34         this.inp.type="hidden";
 35         this.inp.name = this.name;
 36 
 37         this.oBox.innerHTML="";
 38 
 39         
 40         a.push('<li>请选择</li>');
 41 
 42         if(this.data && this.data.length){
 43             for(var i in this.data){
 44                 for(var j in this.data[i]){
 45                     this.config.push(j);
 46                 }
 47                 break;
 48             }
 49 
 50 
 51             for(var i = 0,l = (this.data && this.data.length)?this.data.length : 0;i<l;i++){
 52                 a.push('<li value="'+ this.data[i][this.config[1]] +'">'+ this.data[i][this.config[0]] + '</li>');
 53             }
 54 
 55         }
 56 
 57         this.ul.innerHTML = a.join('');
 58         this.ul.style.display = 'none';
 59         this.cnt.innerHTML = "请选择";
 60         this.mark.innerHTML = '▼'
 61 
 62 
 63         this.oBox.appendChild(this.cnt);
 64         this.oBox.appendChild(this.mark);
 65         this.oBox.appendChild(this.inp);
 66         this.oBox.appendChild(this.ul);
 67 
 68         UlBox.push(this.ul);
 69         this.oLi = this.ul.getElementsByTagName('li');
 70  
 71     };
 72 
 73 
 74     simSelect.prototype.core=function(){
 75 
 76         var _this = this;
 77 
 78         this.ul.flag = true;
 79         function hide(__this){    //单击下拉列表选项时候的处理函数。
 80             _this.ul.style.display="none";
 81             _this.cnt.innerHTML = __this.innerHTML;
 82             _this.inp.value = __this.getAttribute(_this.config[1]) ||  null;
 83             _this.ul.flag=true;
 84             _this.fn &&  _this.fn(_this.inp.value,__this,_this.oLi,_this.ul,_this.oBox);
 85         }
 86 
 87         function hideAndShow(){    //单击内容框或者三角形按钮时候的处理函数。
 88             
 89             return function(event){
 90                 var event = event || window.event;
 91                 if(_this.ul.flag){
 92                     _this.ul.style.display="block";
 93                     _this.ul.flag=false;
 94                 }else{
 95                     _this.ul.style.display="none";
 96                     _this.ul.flag=true;
 97                 }
 98 
 99                 for(var i=0;i<UlBox.length;i++){
100                     if(_this.ul != UlBox[i]){
101                         UlBox[i].style.display="none";
102                         UlBox[i].flag = true;
103                     }
104                 }
105 
106                 if(document.addEventListener){
107                     event.stopPropagation();
108                     event.preventDefault();
109                 }else{
110                     event.cancelBubble = true;
111                     event.returnValue = false;
112                 }
113             }
114 
115         }
116 
117         for(var i=0;i<this.oLi.length;i++){
118 
119             this.oLi[i].index = i;
120             this.oLi[i].οnclick=function(){
121                 hide(this);
122             };
123             this.oLi[i].οnmοuseοver=function(){
124                 this.className = 'hover';
125             };
126             this.oLi[i].οnmοuseοut=function(){
127                 this.className = '';
128             };
129             this.oLi[i].οncοntextmenu=function(event){
130                 var event = event || window.event,
131                     oTarget = event.srcElement ? event.srcElement : event.target;
132                     hide(this);
133                     return false;
134             };
135 
136         }
137         this.cnt.οnclick=hideAndShow();
138         this.mark.οnclick=hideAndShow();
139     };
140 
141     root.simSelect=function(p){
142         new simSelect(p);
143     };
144 
145 })(window)

调用方式如下：

 1 simSelect({
 2     'dom':document.getElementById('select'),
 3     'data':data,
 4     'name':'dq'
 5 });
 6 /*
 7     |-- dom [object]        ：指定生成下拉列表组件的dom对象。
 8     |-- name[string]            ：设置表单控件的name属性值。
 9     |-- data [object]        ：生成下拉列表选项的数据。
10     |-- fn[function]        ：选择下来列表后的回调函数。
11 */

 

示例：联动生成：

 1 var data =[
 2     {'key':'安徽','value':'ah'},
 3     {'key':'浙江','value':'zj'},
 4     {'key':'江苏','value':'js'}
 5 ];    
 6 var data2 =[
 7     {'name':'六安','value':'la'},
 8     {'name':'合肥','value':'hf'},
 9     {'name':'安庆','value':'aq'}
10 ];
11 simSelect({
12     'dom':document.getElementById('select'),
13     'data':data,
14     'name':'dq',
15     'fn':function(a){
16         if(a == 'ah'){
17             simSelect({
18                 'dom':document.getElementById('select1'),
19                 'data':data2,
20                 'name':'sx',
21                 'fn':function(b){
22                     alert(b);
23                 }
24             });
25         }
26     }
27 });

 

 

 

 

转载于:https://www.cnblogs.com/zhangxiaolei521/p/6012652.html