jquery Plugin-Custom Select

Because the native select does not unify the styles in each browser, especially under IE67, you can not use style control directly, it is quite painful when pm lets you make a style. The best way to do this is to use a custom style to mimic the select effect. Here is a jquery plugin that implements a custom select (castrated many of the events of the native Select, but the main one is still in) the style that needs to be referenced:

 . self-select-wrapper{position:relative;    Display:inline-block;    border:1px solid #d0d0d0;    width:250px;    height:40px; font-size:14px;} div.self-select-wrapper{/* resolves IE67 block-level elements that do not support display:inline-block*/*display:inline;}. Self-select-wrapper. self-select    -display{Display:inline-block;    Cursor:pointer;    width:100%;    height:40px;    Background:-moz-linear-gradient (top, #fff, #eee);    Background:-o-linear-gradient (top, #fff, #eee);    Background:-webkit-gradient (linear, 0% 0, 0% 100%, from (#fff), to (#eee)); Filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0,startcolorstr= #ffffff, endcolorstr= #eeeeee);}    . self-select-display. self-select-text{padding-left:10px;    Display:inline-block;    line-height:40px; width:210px;}    . self-select-display. self-select-arrow-down{height:0;    width:0;    Overflow:hidden;    font-size:0;    line-height:0;    Display:inline-block;    Vertical-align:middle; Border-color: #aaa Transparent transparent transparent;    Border-style:solid dashed dashed dashed; BORDER-WIDTH:7PX;}    . self-select-wrapper. self-select-ul{Position:absolute;    max-height:200px;    _height:200px;    border:1px solid #ccc;    Background-color: #fff;    top:41px;    left:0px;    Overflow-y: auto;    _overflow-y:auto!important;    padding:0px;    margin:0px;    width:100%;    z-index:2014; Display:none;}    . self-select-wrapper. Self-select-ul li{list-style:none; self-select-ul. self-select-option{line-height:28px;    Cursor:pointer;    Display:block;    padding-left:10px;    Text-decoration:none; Color: #000;} . Self-select-ul. Self-select-option:hover,.self-select-ul. current{background-color: #eee;}

     JS Source:   

 /** * Resolve custom Select Custom Style requirements * Select parent element Use Z-index */(function ($) {var TPL = ' <div class= "self-select-wrapper" > ' + ' <span class= ' self-select-display ' > ' + ' <span class= ' self-select-text ' ></span> ' + ' <i class= "Self-select-arrow-down" ></i> ' + ' </span> ' + ' <ul class= "Self-select-ul" ></ul> ' + ' <  /div> ';  $.fn.selfselect = function (changehandler) {var name = $ (this). attr (' name ');   var $selects = $ (this);   function Getsourcedata ($options) {var text = [];   var value = [];    $.each ($options, function () {Text.push ($ (this). html ());   Value.push ($ (this). attr (' value '));   });  return {text:text, value:value};   } function Buildtpl ($selfSelect, $select) {var valuearr =[];   var textarr = [];   var optiontpl = ';   var $options = $select. Find (' option ');   var sourcedata = Getsourcedata ($options);   Valuearr = Sourcedata.value;   Textarr = Sourcedata.text;   $select. Hide (); $selfSelect. Find ('. SELf-select-text '). html (textarr[0]); $.each (Textarr, function (seq, text) {optiontpl + = ' <li><a class= "self-select-option" href= "#" value= "' +valuea   rr[seq]+ ' > ' +text+ ' </a></li> ';   });  $selfSelect. Find ('. Self-select-ul '). HTML (OPTIONTPL);    } function Initselect () {//resolves multiple select problems $.each ($selects, function (i, Selectel) {var $selfSelect;    var guid = Math.floor (Math.random () *100);    var $select = $ (Selectel);    var $parent = $select. Parent ();     if (! $select. Prev (). Hasclass (' Self-select-wrapper ')) {$select. Before (TPL);     $select. Prev (). addclass (' select-' + GUID);    $selfSelect = $parent. Find ('. select-' + GUID);    }else {$selfSelect = $select. Prev ();    } buildtpl ($selfSelect, $select);  Initevent ($selfSelect, $select)}); } function Initevent ($selfSelect, $select) {$selfSelect. Find ('. Self-select-display '). Off (' click '). On (' click '),    function () {var $selfSelects = $ (' body '). Find ('. Self-select-wrapper '); var iscliked =$ (this). Hasclass (' clicked ');     if (iscliked) {$ (this). Removeclass (' clicked ');    $selfSelect. Find ('. Self-select-ul '). Slideup (' fast ');     }else {$ (this). addclass (' clicked ');    $selfSelect. Find ('. Self-select-ul '). Slidedown (' fast ');    }//Prevent Z-index coverage problem $.each ($selfSelects, function (i, Selectel) {$ (Selectel). CSS (' Z-index ', 0);    });   $selfSelect. CSS (' Z-index ', 1);    });    $selfSelect. Find ('. Self-select-option '). On (' MouseDown ', function ()} {var text = $ (this). html ();    var value = $ (this). attr (' value ');    $ (this). Parents (' ul '). Slideup (' fast ');    $selfSelect. Find ('. Self-select-display '). Removeclass (' clicked ');    $selfSelect. Find ('. Self-select-text '). html (text);    $ (this). AddClass ("current");    $ (this). The parent (). siblings (). Children (). Removeclass (' current ');    Modifies the value of SELECT and triggers the Change event $select. val (value);   $select. Trigger (' change ', value);    }); $ (document). On (' MouseDown ', function (e) {if ($ (e.target). Hasclass (' Self-select-ul ') | | $ (e.target). parENT (). Hasclass (' Self-select-display ')) return;    $selfSelect. Find ('. Self-select-display '). Removeclass (' clicked ');   $selfSelect. Find ('. Self-select-ul '). Slideup (' fast ');    });   $select. On (' Change ', function (E, Val) {Changehandler && Changehandler (val);  });   } initselect (); return this; };} (JQuery));

Use: The second is after the plug-in generated by the provinces and cities, call the custom select generated can see the effect here. Custom Sleect Benefits:

• Style is fully controllable
• Compatible with IE series browser
• Easy to use, without affecting the default change event handling

Problems encountered in   development: 1. Linear gradient     IE using filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, Startcolorstr= #ffffff, endcolorstr= #eeeeee); To solve the problem of linear gradient, please refer to the following information. 2.IE6 A tag hover problem     IE6 does not set the href attribute, does not trigger: hover style 3. IE 67 block-level element Display:inline-block4.z-index level issues     Change the Z-INDEX5.CSS implementation of the custom select in the active state the lower triangle, ie under the transparency problem     Set the transparent portion of the style value to dashed.     Border-style:solid Dashed dashed dashed;  If you feel useful, can recommend ~ If there is a problem, please reply together ~   reference:/http www.colorzilla.com/gradient-editor/ --CSS3 Linear change compatible with each browser http://www.cnblogs.com/leejersey/archive/2012/07/11/ 2586506.html --IE67 The block element is set to Inline-block solution http://webdesign.tutsplus.com/articles/ What-you-may-not-know-about-the-z-index-property--webdesign-16892 --  z-inxde hierarchy Problem https:// Github.com/doyoe/blog/blob/master/posts/css/2014-01-21-you need to understand the Z-index world. MD  --Z-index Level http:// caibaojian.com/css-border-triangle.html --CSS implements a triangular shape