在网上看到了一个写的挺好挺简单的自定义select样式的插件，在理解了它的原理之后，自己也尝试着写了一个。
核心思想：将原来的<select><option></option></select>隐藏掉动态写进页面一个<div>在这里面用<dl><dt><dd>这样的结构代替原来的下拉框。
大概框架：<div class="i_selectbox">//这是用来包裹整个自定义的select框
<div class="i_currentselected"></div>//这是当前默认显示的select框
<div class="i_selectoption"></div> //这是选择是弹出的下拉框
</div>
全部代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4 <title></title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6 <script type="text/javascript" src="jquery.min.js"></script>
7
8 <style>
9
10
11 /* 这里来定义你自己的select框的样式 */
12 .i_selectbox {
13 margin-top:20px;
14 height:32px;
15 position:relative;
16 font-size:14px
17 }
18 /* 默认显示的select框*/
19 .i_selectbox .i_currentselected {
20 width:150px;
21 height:24px;
22 background:url(select.png) 176px 4px no-repeat;
23 border:1px solid #cdcdcd;
24 text-indent:10px;
25 line-height:24px;
26 cursor:pointer
27 }
28 /* 下拉选择框 */
29 .i_selectbox .i_selectoption {
30 overflow-x:hidden;
31 overflow-y:hidden;
32 position:absolute;
33 left:0px;
34 top:17px;
35 padding:5px;
36 background-color:#fff;
37 background:rgba(255,255,255,.9);
38 border:1px solid #eee
39 }
40 .i_selectbox .i_selectoption dt {
41 height:24px;
42 background-color:#eee;
43 text-indent:5px;
44 font-style:italic;
45 color:#555;
46 line-height:24px;
47 }
48 .i_selectbox .i_selectoption dd{
49 margin-left: -3px;
50 height:30px;
51 border-bottom:1px solid #cdcdcd;
52 cursor:pointer;
53 text-indent:2px;
54 line-height:30px
55 }
56 .i_selectbox .i_selectoption dd:hover{
57 background-color:#cdcdcd;
58 color:#fff
59 }
60 .i_selectbox .i_selectoption dd.selected{
61 background-color:#f17f36;
62 color:#fff
63 }
64 </style>
65 <head>
66 <body>
67 <select class="my_select">
68
69 <option value="0">Alabama</option>
70 <option value="1">Alaska</option>
71 <option value="2">Arizona</option>
72
73 <option value="3">Arkansas</option>
74 <option value="4">California</option>
75 <option value="5">Colorado</option>
76
77 <option value="6">Connecticut</option>
78 <option value="7">Delaware</option>
79 <option value="8">Columbia</option>
80 <option value="9">Florida</option>
81
82 </select>
83 <script>
84
85 /*插件写法的函数*/
86 $.fn.newStyle = function(){
87 var set = {
88 selectbox : ‘i_selectbox‘,
89 showselect : ‘i_currentselected‘,
90 selectoption : ‘i_selectoption‘,
91 curselect : ‘selected‘,
92 width : 200,
93 height :150,
94 zindex : 2
95 };
96 /*让最初的select隐藏*/
97 $(this).hide();
98 /*动态写进去html替代原本的select*/
99 var html = ‘<div class="‘+set.selectbox+‘" style="zindex:‘+set.zindex+‘">‘
100 +‘<div class="‘+set.showselect+‘" style="width:‘+set.width+‘px;">‘+$(this).find(‘option:selected‘).text()+‘</div>‘
101 +‘<dl class="‘+set.selectoption+‘" style="display:none;width:‘+set.width+‘px" >‘;
102 if($(this).find(‘optgroup‘).size()>0){
103 $(this).find(‘optgroup‘).each(function(){
104 html += ‘<dt>‘+$(this).attr(‘label‘)+‘</dt>‘;
105 $(this).find(‘option‘).each(function(){
106 if($(this).is(‘:selected‘)){
107 html += ‘<dd class="‘+set.curselect+‘">‘+$(this).text()+‘</dd>‘;
108 }else{
109 html += ‘<dd>‘+$(this).text()+‘</dd>‘;
110 }
111 });
112 });
113 }else{
114 $(this).find(‘option‘).each(function(){
115 if($(this).is(‘:selected‘)){
116 html += ‘<dd class="‘+set.curselect+‘">‘+$(this).text()+‘</dd>‘;
117 }else{
118 html += ‘<dd>‘+$(this).text()+‘</dd>‘;
119 }
120 });
121
122 }
123 /*将html插入到select框的后面*/
124 $(‘select‘).after(html);
125 console.log(0);
126 /*添加事件*/
127
128 /*默认显示框的选择事件*/
129 $(‘.‘+set.showselect).toggle(function(){
130 console.log(1);
131 /*$(‘.selectoption‘).hide();*/
132 $(‘.‘+set.selectbox).css(‘zindex‘,set.zindex);
133 $(‘.‘+set.selectoption).css(‘zindex‘,set.zindex+1);
134 $(‘.‘+set.selectoption).toggle();
135 },function(){
136 $(‘.‘+set.selectoption).css(‘zindex‘,set.zindex);
137 $(‘.‘+set.selectoption).toggle();
138 });
139 /*下拉列表的选择事件*/
140 $(‘.‘+set.selectoption).find(‘dd‘).click(function(){
141 console.log(2);
142 $(this).addClass(set.curselect).siblings().removeClass(set.curselect);
143 var index = $(‘.‘+set.selectoption).find(‘dd‘).index(this);
144 $(‘.‘+set.showselect).text($(this).text());
145 $(this).find(‘option‘).eq(index).attr(‘selected‘,‘selected‘);
146 $(‘.‘+set.selectoption).hide();
147 });
148 /*点击select框之外的其他部分的时候select框应该收起*/
149 $(‘html,body‘).click(function(e){
150 /* 判断当前的点击事件目标不是set.selectoption这个class*/
151 if(e.target.className.indexOf(set.selectoption)==-1){
152 $(‘.‘+set.selectoption).hide();
153 $(‘.‘+set.selectbox).css(‘zIndex‘,set.zindex);
154 }
155 });
156
157 }
158
159 $(‘.my_select‘).newStyle();
160
161 </script>
162 </body>
163 </html>
各个浏览器的兼容性还蛮好的喔~~
源插件地址：http://mrthink.net/jquery-select-isimulateselect/
自定义样式的select下拉框
时间： 2024-08-05 06:18:18