Homemade jquery drop-down box plugin

(function ($) {$.fn.select3 = function (option) {var _this = $ (this);        var isinit = _this.prev (' div '). Hasclass (' select3-parent ');        if (Isinit) return false;        var _default = {className: ' select3-parent ',//dropdown box style can be customized width: ' 300px '};        By default, the width is set according to the width of the element set, it is best to set the width of the original dropdown box//Merge Custom Properties _default = $.extend (_default, option); var _data_val = _this.children (' option:checked '). attr (' value '); The value of the default checked item _data_val = (_data_val? _data_val: '-') var _text = _this.children (' option:checked '). Text (). Trim ();        The text of the default selected item _text = (_text? _text: '-'); var _tplwrap = ' <div class= ' + _default.classname + ' "style=" width: ' + _default.width+ ' "> ' + ' <div class= "select3-topic" data-val= "' + _data_val + '" ><span> ' + _text + ' &LT;/SPAN&GT;&L        T;i></i></div><ul class= "Select3-ul" style= "width: ' + _default.width+ '" > "; _thIs.children (). each (function () {var _this = $ (this);            var _data_val = $ (this). attr (' value ');            var _text = $ (this). Text (). Trim ();                if (_this.is (' Optgroup ')) {_text = _this.attr (' label ');                _data_val = ' group ';                _tplwrap + = ' <li data-val= "' + _data_val + '" class= "Select3-group" > ' + _text + ' <ul> ';                    _this.children (). each (function () {_text = $ (this). Text (). Trim ();                    _data_val = $ (this). attr (' value ');                _tplwrap + = ' <li data-val= "' + _data_val + '" > ' + _text + ' </li> ';                });            _tplwrap + = ' </ul></li> ';            }else{_tplwrap + = ' <li data-val= ' + _data_val + ' "> ' + _text + ' </li> ';        }        });        _tplwrap + = ' </ul></div> '; _this.addclass (' hide ');//Hide current control _this.before (_TPLWRAP)//Show plugin control//Bind drop Event $ ('. SELect3-topic '). Unbind (). bind (' click ', Function () {$ ('. Open '). ($ (this). Parent (' div ')). Removeclass (' open ');            $ (this). addclass (' open ');            $ (this). Children (). addclass (' open ');        $ (this). Parent (' div '). Toggleclass (' open ');        }); Bind line Click event $ ('. Select3-ul li[data-val!= "Group"]). Unbind (). bind (' click ', function () {var _parent = $ (th            IS). Parents ('. Select3-ul ');//Get parent tag var _val = $ (this). attr (' Data-val ');            var _text = $ (this). text ();            _parent.siblings (' div '). attr (' Data-val ', _val);            _parent.siblings (' div '). Find (' span '). Text (_text);        _parent.parent (' div '). Removeclass (' open ');//Hide parent Tag _this.val (_val);//Set Select Value _this.change ();        });            Body Click to remove the drop-down $ (' body '). Unbind (). Click (function (e) {var pType = E.target.tagname;            var className = E.target.classname; var reg = new RegExp (' Open ') if (PType == ' I ' | |            PType = = ' SPAN ') {className = E.target.parentelement.classname;            } if (ClassName = = ' Open-dt ' | | pType = = ' DT ' | | reg.test (className)) {return; } $ ('. Open '). Removeclass (' open ');//select3 2nd edition $ (' DD '). Slideup (function () {$ ('. S                Elect-has-border '). Removeclass (' Select-has-border-open ');                $ (' dt[role-page] '). attr (' style ', ');                $ ('. Campaign-query '). CSS (' Border-radius ', ' 5px ');                $ ('. Cp-select '). Removeclass (' Cp_select_open ');                $ ('. Select-no-border-open '). attr (' class ', ' Select-no-border ');            $ ('. Select-no-border-open '). Children (' DT '). attr (' style ', ');        });    }); };}) (JQuery);

 

/* SELECT3 container outermost open style */.select3-parent{font-family:arial, Helvetica, Sans-serif;    font-size:12px;    Display:inline-block;    border-radius:5px;    border:1px solid #dfdfdf;    height:30px;    line-height:30px;    Cursor:pointer;    position:relative;    Background-color: #ffffff;    Color: #666666; /* Test */min-width:60px;}.    select3-topic{height:30px;    Overflow:hidden;    padding-left:10px; padding-right:10px;}. Select3-topic i{Float:right;}    /* select3 drop-down content */.select3-ul{Display:none;    Position:absolute;    List-style:none;    padding:0;    margin:0;    border:1px solid #dfdfdf;    Border-top:none;    border-bottom-left-radius:5px;    border-bottom-right-radius:5px;    margin-left:-1px;    Background-color: #ffffff;    z-index:999;    Overflow:auto;    max-height:330px;    box-shadow:0 6px 12px Rgba (0,0,0,0.2); /* Test */width:300px;}    /* drop-down content style */.select3-ul li{font-size:12px;    padding-left:10px; Padding-right:10px;}.    Select3-ul li:hover{Background-color: #111e30; Color: #ffffff;}    /* Group heading style select3-group */.select3-ul li.select3-group{padding-left:0;    padding-right:0;    text-indent:10px; Color:black;}.    select3-group{Cursor:default; Font-weight:bold;}.    Select3-group ul{Font-weight:normal;    Color: #666666;    List-style:none;    padding:0; margin:0;}.    Select3-group li{padding-left:10px; padding-right:10px;}    li.select3-group:hover{Background-color: #ffffff; Color:black;}. Select3-group li:hover{Cursor:pointer;}    /* SELECT3 container outermost point open after style */.select3-parent.open{border-bottom-left-radius:0px;    border-bottom-right-radius:0px;    box-shadow:0 6px 12px Rgba (0,0,0,0.2);    Border-bottom:none; border-bottom:1px solid #fff;} /* After the point is opened, the drop-down menu content style */.select3-parent.open. select3-ul{display:block;}.    Select3-parent.open. select3-topic{padding:0px;    height:29px;    margin-left:10px;    margin-right:10px; BORDER-BOTTOM:1PX Solid #dfdfdF;} 

Homemade jquery drop-down box plugin