在做前端开发的时候，你是否有过想定制一些select选择列表的内容格式，今天介绍一个小插件tzSelect，可以自定义select选择列表的样式。由于该插件不支持最新的jQuery，天屹做了一些改进使其兼容最新的jQuery版本，并会详细的介绍这个插件的实现方法。

在线演示  源码下载

HTML结构

tzSelect是通过使用div和ul来替换默认的select来实现为select添加个性化样式的。所以在使用tzSelect的时候，需要用一些格式来使其正确的工作。

整个结构就是一个普通的select结构，需要注意的是option中的data-*属性，data-*是HTML5的新属性。

data-*为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法 获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

点击查看HTML5 data-*属性介绍。得益于jQuery我们可以直接使用.data()方法来访问data-*属性，点击查看.data()使用方法。

查看代码

1. <!-- 我们将使用jQuery和CSS3创建新的div结构来替换下面的select结构-->
2.  
3. <select class="customizedSelect">
4.  
5.     <!-- 定义 HTML5 data 属性 -->
6.  
7.     <option value="0" selected="selected" data-skip="1">选择产品</option>
8.     <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4&lt;i&gt;有货&lt;/i&gt;">iPhone 4</option>
9.     <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;有货&lt;/i&gt;">iPod</option>
10.     <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;缺货&lt;/i&gt;">MacBook Air</option>
11.     <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;有货&lt;/i&gt;">iMac Station</option>
12. </select>

我们看一下第一个option项，data-skip=”1″表示不显示这个option到select的下拉列表里面，使这个option作为一个默认值显示。data-skip的值无关紧要只要有这个属性就ok了。剩下的其他的含有data-icon和data-html-text是用来提供新”option”需要的信息，文章js部分会介绍如何使用这些data-*属性。

CSS样式

CSS3支持为同一元素使用多个背景的功能，这样可以省去多个元素来定义背景，只是用一个div就达到我们想要的效果。

查看代码

1. /*-------------------------------
2. *   默认样式
3. --------------------------------*/
4.  
5. .tzSelect{
6.  
7.     /* 新的下拉列表容器类 */
8.  
9.     height:34px;
10.     display:inline-block;
11.     min-width:200px;
12.     position:relative;
13.     margin:5px;
14.  
15.     background:url("img/dropdown_slice.png") no-repeat -99999px;
16. }
17.  
18. .tzSelect .selectBox{
19.     position:absolute;
20.  
21.     height:100%;
22.     width:100%;
23.  
24.     line-height:34px;
25.     text-align:center;
26.     text-shadow:1px 1px 0 #EEEEEE;
27.     color:#666666;
28.  
29.     /* 使用css3多个背景图片方式 */
30.  
31.     background:url('img/select_slice.png') repeat-x #ddd;
32.     background-image:url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png'),url('img/select_slice.png');
33.     background-position:0 -136px, right -204px, 50% -68px, 0 0;
34.     background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
35.  
36.     cursor:pointer;
37.  
38.     -moz-border-radius:3px;
39.     -webkit-border-radius:3px;
40.     border-radius:3px;
41. }
42.  
43. .tzSelect .selectBox:hover,
44. .tzSelect .selectBox.expanded{
45.     background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
46.     color:#2c5667;
47.     text-shadow:1px 1px 0 #9bc2d0;
48. }
49.  
50. .tzSelect .dropDown{
51.     position:absolute;
52.     top:40px;
53.     left:0;
54.     width:100%;
55.     border:1px solid #32333b;
56.     list-style:none;
57.     z-index:1000;
58.  
59.     -moz-box-sizing:border-box;
60.     -webkit-box-sizing:border-box;
61.     box-sizing:border-box;
62.  
63.     -moz-box-shadow:0 0 4px #111;
64.     -webkit-box-shadow:0 0 4px #111;
65.     box-shadow:0 0 4px #111;
66. }
67.  
68. .tzSelect li{
69.     background-color:#222;
70.     cursor:pointer;
71.     padding:6px;
72.     text-align:center;
73. }
74.  
75. .tzSelect li:hover{
76.     background-color:#292929;
77. }
78.  
79. /*-----------------------------------------------------
80. *   apple产品下拉列表样式
81. ------------------------------------------------------*/
82.  
83. .tzSelect .hasDetails{
84.     border-width:0 1px 1px;
85. }
86.  
87. .tzSelect .hasDetails li{
88.     height:85px;
89.     position:relative;
90.     padding:0;
91.     text-align:left;
92.  
93.     /* 使用css3多个背景图片方式 */
94.  
95.     background:url('img/dropdown_slice.png') repeat-x #222;
96.     background-image:url('img/dropdown_slice.png'),url('img/dropdown_slice.png'),url('img/dropdown_slice.png');
97.     background-position: 50% -171px, 0 -85px, 0 0;
98.     background-repeat: no-repeat, no-repeat, repeat-x;
99. }
100.  
101. .tzSelect .hasDetails li:hover{
102.     background-position: 50% -256px, 0 -85px, 0 0;
103. }
104.  
105. .tzSelect .hasDetails li span{
106.     left:88px;
107.     position:absolute;
108.     top:27px;
109. }
110.  
111. .tzSelect .hasDetails li i{
112.     color:#999999;
113.     display:block;
114.     font-size:12px;
115. }
116.  
117. .tzSelect .hasDetails li img{
118.     left:9px;
119.     position:absolute;
120.     top:13px;
121. }

jQuery代码

插件实现思想，就是使用div和ul代替原有的select，首先找到原有的select，然后循环遍历option，用li替代。请看下面代码中的具体注释：

查看代码

1. (function ($) {
2.  
3.     $.fn.tzSelect = function (options) {
4.         options = $.extend({
5.             render: function (option) {
6.                 return $('<li>'+option.text()+'</li>');
7.             },
8.             className: ''
9.         }, options);
10.  
11.         return this.each(function () {
12.  
13.             //将被替换的select
14.             var select = $(this);
15.  
16.             //新的div容器，用来显示被替换的select
17.             //<div class='selectBox'></div>用来存储当前选中的option值
18.             var selectBoxContainer = $("<div class='tzSelect'><div class='selectBox'></div></div>");
19.             selectBoxContainer.css({ width: select.width() });
20.  
21.             //用来存储原select中各个option选项
22.             var dropDown = $("<ul class='dropDown'></ul>");
23.             var selectBox = selectBoxContainer.find(".selectBox");
24.  
25.             //循环select中的内容，并用新的li替换以前的option
26.             if (options.className) {
27.                 dropDown.addClass(options.className);
28.             }
29.             select.find("option").each(function (index, item) {
30.                 var option = $(item);
31.  
32.                 if (index == select.find(":selected").index()) {
33.                     selectBox.html(option.text());
34.                 }
35.  
36.                 //使用data访问HTML5 data-*属性
37.  
38.                 if (option.data("skip")) {
39.                     return true;
40.                 }
41.  
42.                 // 使用li替换option
43.                 // 读取data-icon 和 data-html-text HTML5 属性的值
44.  
45.                 var li = options.render(option);
46.  
47.                 li.click(function () {
48.  
49.                     selectBox.html(option.text());
50.                     dropDown.trigger("hide");
51.  
52.                     //设定选中的值到<div class='selectBox'></div>
53.                     select.val(option.val());
54.  
55.                     return false;
56.                 });
57.  
58.                 dropDown.append(li);
59.             });
60.  
61.             selectBoxContainer.append(dropDown.hide());
62.             select.hide().after(selectBoxContainer);
63.  
64.             //绑定show，hide事件
65.             dropDown.bind("show", function () {
66.  
67.                 if (dropDown.is(":animated")) {
68.                     return false;
69.                 }
70.  
71.                 selectBox.addClass("expanded");
72.                 dropDown.slideDown();
73.  
74.             }).bind("hide", function () {
75.  
76.                 if (dropDown.is(":animated")) {
77.                     return false;
78.                 }
79.  
80.                 selectBox.removeClass("expanded");
81.                 dropDown.slideUp();
82.  
83.             }).bind("toggle", function () {
84.                 if (selectBox.hasClass("expanded")) {
85.                     dropDown.trigger("hide");
86.                 }
87.                 else dropDown.trigger("show");
88.             });
89.  
90.             selectBox.click(function () {
91.                 dropDown.trigger("toggle");
92.                 return false;
93.             });
94.  
95.             //当点击页面其他的地方，隐藏选择列表
96.             $(document).click(function () {
97.                 dropDown.trigger("hide");
98.             });
99.  
100.         });
101.     }
102.  
103. })(jQuery);