jQuery Dropdown plugin

by Umar

HTML

<select class="select">
    <option value="">Select country - -</option>
    <option value="UK" selected="selected">United Kingdom</option>
    <option value="US">United States</option>
    <option value="AUS">Australia</option>
    <option value="PLU">Pluto</option>
</select>

CSS

/*----------------
BODY
----------------*/
html, body {
margin:0;
padding:0;
color:#484e57; 
font: normal 12px/22px Arial, sans-serif;
text-align:left;
background:#fff;
margin:0;
text-shadow:0 0 1px transparent;
}

a, a:visited { text-decoration:none }


/*---------------------------
Select Menu CSS
---------------------------*/

.selectWrap {
    margin-top:150px;
    width:200px;
    position:relative;
}

.selectTab {
    padding:5px 12px;
    border:1px solid #c4c8d0;
    border-bottom-color:#9a9fa9;
    border-radius:2px;
    color:#7d8087;
    font-weight:700;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(239,239,247,1) 89%, rgba(220,224,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(89%,rgba(239,239,247,1)), color-stop(100%,rgba(220,224,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,247,1) 89%,rgba(220,224,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,247,1) 89%,rgba(220,224,232,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,247,1) 89%,rgba(220,224,232,1) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dce0e8',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,247,1) 89%,rgba(220,224,232,1) 100%); /* W3C */
    box-shadow:0 1px 2px rgba(0,0,0,0.1);
    position:relative;
}

    .arrows {
        position:absolute;
        top:0; bottom:0; right:0;
        padding:5px 10px 5px 19px;
        border-left:1px solid #c4c8d0;
        z-index:300;
    }

    .up,.down {
        position:absolute;
        right:10px;
        font-size:10px;
        line-height:10px;
    }

    .up {
       ...

JavaScript

(function($){

    $.fn.extend({ 

        broSelect: function() {
         
            return this.each(function() {
                
                var t = $(this),
                    opt = $(this).children(),
                    arg = [];
                    
                for(i=0;opt.length>i;i++) {
                    arg.push({
                        'value': opt.eq(i).val(),
                        'name': opt.eq(i).text()
                    });
                }
                
                t.css({display:'none'}).wrap('<div class="selectWrap" />');
                var selectWrap = t.parent();
                
                selectWrap.append('<div class="selectTab"><span class="val"></span><div class="arrows"><span class="up">&#9650;</span><span class="down">&#9660;</span></div></div><div class="selectOptions" />');
                
                var selectTab = $('.selectTab',selectWrap),
                    selectOptions = $('.selectOptions',selectWrap),
                    selected = 0;
                    
                opt.each(function() {
                    if($(this).attr('selected')) {
                        selected = $(this).index();
                    }
                });
                
                $('.val',selectTab).text(arg[selected]['name']).attr('alt',arg[selected]['value']);
                    
                for(i=0;arg.length>i;i++) {
                    selectOptions.append('<div alt="'+arg[i]['value']+'">'+arg[i]['name']+'</div>');
                }
                
                function tog() {
                    selectOptions.slideToggle();
                    selectTab.toggleClass('active');
                }
                
                selectTab.click(function() {
                    tog();
                });
                
                selectOptions.children().click(function() {
                    var i = $(this).index();
                   ...