下拉列表自己封装的
Posted 張暁磊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉列表自己封装的相关的知识，希望对你有一定的参考价值。
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.onclick=hideUl;
12 document.oncontextmenu=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].onclick=function(){
121 hide(this);
122 };
123 this.oLi[i].onmouseover=function(){
124 this.className = \'hover\';
125 };
126 this.oLi[i].onmouseout=function(){
127 this.className = \'\';
128 };
129 this.oLi[i].oncontextmenu=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.onclick=hideAndShow();
138 this.mark.onclick=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 });