写的一个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>\n";
}
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;}