$.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;}
时间: 2024-12-26 19:01:31