美化select的jquery插件
自己写的一个美化select插件，浏览器自带的实在太丑，还不能用css自定义。
插件主要原理是隐藏原生的select控件，支持select上设置change事件。
脚本
1 /* 2 * iSelect 3 * 自定义select控件 4 */ 5 (function ($) { 6 $.fn.iSelect = function (configs) { 7 var configs = $.extend({}, $.fn.iSelect.defaults, configs || {}); 8 return this.each(function (index, element) { 9 var myThis = this; 10 var $this = $(this); 11 12 var elId = $this.attr('name'); 13 if (elId == '' || typeof (elId) == 'undefined') { 14 elId = 's00' + index; 15 $this.attr('id', elId); 16 } 17 var $wrap = $('#iselect-' + elId); 18 if ($wrap.length <= 0) { 19 $wrap = $('<span class="iselect" id="iselect-' + elId + '"><div class="old"></div><div class="text"></div><div class="dropdown"><ul></ul></div></span>'); 20 $this.before($wrap); 21 $this.prependTo($wrap.find('.old')); 22 } 23 var $text = $wrap.find('.text'); 24 var $dropdown = $wrap.find('.dropdown'); 25 var width = $this.width(); 26 var allwidth = configs.width; 27 if (allwidth == 'auto') { 28 allwidth = width; 29 } 30 //$wrap.css({width:allwidth}); 31 $text.css({width:allwidth}); 32 $dropdown.css({width:allwidth + 2}); 33 var $list = $dropdown.find('ul'); 34 var html = ''; 35 var i = 0; 36 var text = ''; 37 var value = ''; 38 var selected = false; 39 var style = ''; 40 for (i = 0; i < myThis.options.length; i++) { 41 text = myThis.options[i].text; 42 value = myThis.options[i].value; 43 selected = myThis.options[i].selected; 44 if (selected) { 45 style = ' class="selected"'; 46 } else 47 style = ''; 48 html += '<li data-value="' + value + '"' + style + '><a href="javascript:;">' + text + '</a></li>'; 49 } 50 $list.html(html); 51 if (myThis.options.length>0) { 52 text = myThis.options[myThis.selectedIndex].text; 53 $text.html(text); 54 } 55 56 $dropdown.hide(); 57 $text.click(function (event) { 58 event.stopPropagation(); 59 $dropdown.show(); 60 }); 61 $(document.body).click(function () { 62 $dropdown.hide(); 63 }); 64 var $items = $list.find('li'); 65 $items.click(function (event) { 66 var selectedIndex = $items.index($(this)); 67 myThis.options[selectedIndex].selected = true; 68 $(myThis).change(); 69 $text.html(myThis.options[myThis.selectedIndex].text); 70 $dropdown.hide(); 71 }); 72 }); 73 }; 74 $.fn.iSelect.defaults = {width:'auto'}; 75 })(jQuery);
样式
.iselect { position:relative; display:inline-block; zoom:1; height:24px; line-height:24px; } .iselect .old { height:1px; overflow:hidden; } .iselect .text { height:24px; text-indent:5px; background:#fff url(images/iselect.png) no-repeat right center; border:solid 1px #d5d5d5; cursor:default; } .iselect .text:hover { border-color:#5999d0; background-image:url(images/iselect_hover.png); } .iselect .dropdown { position:absolute; left:0; top:27px; z-index:99; width:100%; height:auto; background:#fff; } .iselect .dropdown ul { border:solid 1px #d5d5d5; max-height:360px; overflow:auto; } .iselect .dropdown li { cursor:pointer; } .iselect .dropdown li a { display:block; padding:0 5px; } .iselect .dropdown li.selected a { background:#5999d0; color:#eee; } .iselect .dropdown a:hover { background:#eee; }
调用
$(function(){ $('select').iSelect(); });
当前支持一个参数 width用来设置宽度，如果是动态更改下拉选项，在select上调用一次iSelect 即可
