美化select的jquery插件

Posted 2020-07-13 IT那些年

自己写的一个美化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 即可