写的一个select插件很粗糙;慢慢修改

$.createSelect= function(options){
    $(options.selectors).each(function(index, item){
        $(item).each(function(index, selector){
            if($(selector).is('select')){
                var optionLength = $(this).find('option').length;
                if(optionLength > 0){
                    var divClass = $(this).attr('class');
                    var jsScroll = '<div class="'+divClass+' selector"><span>'+$(this).find('option').eq(0).text()+'</span><ul>';
                    for(var i = 0 ; i < optionLength; i++){
                        var $op = $(this).find("option").eq(i);
                         jsScroll += "<li val='" + $op.attr("value") + "'>" + $op.html() + "</li>
";
                    }
                    jsScroll += '</ul></div>';
                    $(this).after(jsScroll);
                    $(this).hide();
                    var $divW = $('.'+divClass).outerWidth();
                    $('.'+divClass).find('span').css({'width':$divW-5}).on('click',function(){
                                   $(this).next('ul').show();
                    }).end().find('ul').css({'width':$divW}).find('li')
                    .on({
                        'mouseover':function(){$(this).addClass('cur')},
                        'mouseout':function(){$(this).removeClass('cur')},
                        'click':function(){
                        $(this).closest('ul').hide().siblings('span').text($(this).text());
                        }
                    });
                }
            }
        })
    })
}
$.createSelect({
    'selectors':['.selector1']
})

.selector{border:1px solid #ccc;position:relative;}
.selector span{padding-left: 5px;background:url(icon.png) no-repeat 265px -19px ;display: inline-block;width:100%;height:100%; cursor: pointer;}
.selector ul{position:absolute;top:31px;left:-1px;width:300px;border:1px solid #ccc;display:none;}
.selector ul li {height:25px;line-height:25px;padding-left:5px; cursor: pointer;}
.selector ul li.cur{background: #eee;}