自己寫的乙個美化select外掛程式，瀏覽器自帶的實在太醜，還不能用css自定義。
外掛程式主要原理是隱藏原生的select控制項，支援select上設定change事件。
指令碼
1/*2* iselect
3* 自定義select控制項4*/
5 (function
($) , $.fn.iselect.defaults, configs ||{});
8return
this.each(function
(index, element)
17var $wrap = $('#iselect-' +elid);
18if ($wrap.length <= 0)
23var $text = $wrap.find('.text');
24var $dropdown = $wrap.find('.dropdown');
25var width = $this
.width();
26var allwidth =configs.width;
27if (allwidth == 'auto')
30//
$wrap.css();
31$text.css();
32 $dropdown.css();
33var $list = $dropdown.find('ul');
34var html = '';
35var i = 0;
36var text = '';
37var value = '';
38var selected = false;39
var style = '';
40for (i = 0; i < mythis.options.length; i++) else
47 style = '';
48 html += '' + text + '
';49}50
$list.html(html);
51if (mythis.options.length>0)
5556
$dropdown.hide();
57 $text.click(function
(event) );
61 $(document.body).click(function
() );
64var $items = $list.find('li');
65 $items.click(function
(event) );
72});
73};
74 $.fn.iselect.defaults = ;
75 })(jquery);
樣式
.iselect .iselect .old .iselect .text .iselect .text:hover .iselect .dropdown .iselect .dropdown ul .iselect .dropdown li .iselect .dropdown li a .iselect .dropdown li.selected a .iselect .dropdown a:hover
呼叫
$(function());
當前支援乙個引數 width用來設定寬度，如果是動態更改下拉選項，在select上呼叫一次iselect 即可
特效 select美化
select的預設樣式往往很醜，為保證頁面樣式風格統一，需要對select進行美化。雖然其美化的外掛程式很多，一搜一大把，但是需要引入長長的css檔案和js檔案實在是件頭痛的事。其實select的實現原理很簡單，就是乙個點選 切換 顯示和隱藏 並傳值 的過程。用jquery模擬了，樣式想怎麼寫就怎麼...
美化的select下拉框
ie7瀏覽器以後的下拉框，給他加上邊框樣式，是沒用的。要是想做出樣式好看的下拉框需要用js或者jquery來模擬實現。如下 class r class link id link css div.bottomtop div.bottomtopright dl.link div.bottomtop di...
jQuery 重新整理select
應用場景 一般情況下，給select所加的事件為change事件，但是當選中乙個之後，被選中的那個option一直處於選中狀態，如果你想再次選中這個選項，那麼你就要首先去切換其他的選項，然後再選這個選項，試想如果選中之後，select回到了預設狀態，再去選任何乙個選項豈不是只需一步即可 如下 選擇列...