首页 > 代码库 > 下拉列表自己封装的
下拉列表自己封装的
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="http://www.mamicode.com/‘+ 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 = http://www.mamicode.com/__this.getAttribute(_this.config[1]) || null;"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 = http://www.mamicode.com/false;>
调用方式如下：
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 =http://www.mamicode.com/[>
下拉列表自己封装的
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。