1、新建html文档。
2、书写hmtl代码。<div id="main_demo"><select id="edu" name="edu"> <option value="0">初中</option> <option value="1">高中</option> <option value="2">中技</option> <option value="3">中专</option> <option value="4">大专</option> <option value="5">本科</option> <option value="6">硕士</option> <option value="7">博士</option> <option value="8">博士后</option> <option value="9">教授</option></select><select id="salary" name="salary"> <option value="0">面议</option> <option value="1">1000以下</option> <option value="2">1000-2000</option> <option value="3">2000-3000</option> <option value="4">3000-5000</option> <option value="5">5000-6000</option> <option value="6">6000-8000</option> <option value="7">8000-10000</option> <option value="8">10000-20000</option> <option value="9">20000以上</option></select></div>
3、书写css代码。.select-wrapper { font: normal 14px '\5FAE\8F6F\96C5\9ED1'; width: 240px; height: 34px; position: relative; cursor: pointer; display: inline-block; *display: inline;*float: left;*margin-right: 10px;background: #fff; border-radius: 3px; border: 1px solid #e3e3e3; }.select-wrapper.focus { border: 1px solid #61b988; }.select-button { font: normal 14px '\5FAE\8F6F\96C5\9ED1'; width: 238px; height: 34px; border: 0; border-radius: 3px; background: #fff; cursor: pointer; padding: 0 26px 0 10px; overflow: hidden; text-align: left; outline: none; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; }.select-down { position: absolute; top: 21px; right: 12px; height: 0; width: 0; overflow: hidden; font-size: 0; border-color: #333 transparent transparent transparent; border-style: solid; border-width: 6px; }.disabled { color: #cccccc; }.select-list { width: 238px; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 0 3px #ddd; border-radius: 3px; display: none; z-index: 2; position: absolute; left: -1px; top: 35px; overflow: hidden; }.select-list ul { margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; line-height: 34px; max-height: 240px; }.select-list ul li { width: auto; height: 34px; padding-left: 10px; cursor: pointer; overflow: hidden; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; }.select-list ul li.selected, .select-list ul li:hover { color: #fff; background: #61b988; }/* 下拉列表不可用样式 */.select-button-disable { color: #ccc; width: 238px; height: 34px; border: 1px solid #e3e3e3; border-radius: 3px; background: #fff; cursor: pointer; padding-left: 10px; overflow: hidden; text-align: left; outline: none; }.select-down-disable { color: #ccc; font-size: 18px; position: absolute; top: 0; right: 10px; line-height: 34px; }
4、书写并添加js代码。;(function($,window,document){var pluginName='selectlist',defaults={enable:true,zIndex:null,width:null,height:null,border:null,borderRadius:null,showMaxHeight:null,optionHeight:34,triangleSize:6,triangleColor:'#333',topPosition:false,speed:100,onChange:function(){}};function SelectList(element,options){this.element=element;this.settings=$.extend({},defaults,options);this._defaults=defaults;this._name=pluginName;this.init()}SelectList.prototype={init:function(){var that=this,element=this.element;that.replaceProtoypeSelect(element);that.setSelectEvent(element);that.setSelectStyle(element)},getSelectID:function(element){var $this=$(element),selectID=$this.attr('id');if(typeof(selectID)!=='undefined'){return selectID}else{selectID='';return selectID}},getSelectName:function(element){var that=this,$this=$(element),selectName=$this.attr('name');if(typeof(selectName)!=='undefined'){return selectName}else{return that.getSelectID($this)}},getSelectClassName:function(element){var $this=$(element),tempClassNameArray=[],classNameArray=[],className=$this.attr('class');if(typeof(className)!=='undefined'){classNameArray=className.split(' ');classNameArray.sort();tempClassNameArray=[classNameArray[0]];for(var i=1;i<classNameArray.length;i++){if(classNameArray[i]!==tempClassNameArray[tempClassNameArray.length-1]){tempClassNameArray.push(classNameArray[i])}}return tempClassNameArray.join(' ')}else{className='';return className}},getSelectedIndex:function(element){var $this=$(element),selectedIndex=$this.get(0).selectedIndex||0;return selectedIndex},getOptionCount:function(element){var $this=$(element);return $this.children().length},getOptionText:function(element){var that=this,$this=$(element),$option=$this.children(),optionText=[],selectLength=that.getOptionCount($this);for(var i=0;i<selectLength;i++){optionText[i]=$.trim($option.eq(i).text())}return optionText},getSelectedOptionText:function(element){var that=this,$this=$(element),selectedIndex=that.getSelectedIndex($this),optionText=that.getOptionText($this);return optionText[selectedIndex]},getSelectedOptionValue:function(element){var that=this,$this=$(element),selectedIndex=that.getSelectedIndex($this),optionValue=that.getOptionValue($this);return optionValue[selectedIndex]},getOptionValue:function(element){var that=this,$this=$(element),$option=$this.children(),optionValue=[],selectLength=that.getOptionCount($this);for(var i=0;i<selectLength;i++){optionValue[i]=$option.eq(i).val()}return optionValue},renderSelect:function(element){var that=this,$this=$(element),selectID=that.getSelectID($this),selectName=that.getSelectName($this),selectClassName=that.getSelectClassName($this),selectOptionText=that.getOptionText($this),selectedOptionText=that.getSelectedOptionText($this),selectOptionValue=that.getOptionValue($this),selectedIndex=that.getSelectedIndex($this),selectedValue=that.getSelectedOptionValue($this),selectLength=that.getOptionCount($this),selectHTML='<div id="'+selectID+'" class="select-wrapper '+selectClassName+'"><input type="hidden" name="'+selectName+'" value="'+selectedValue+'" /><i class="icon select-down"></i><input type="button" class="select-button" value="'+selectedOptionText+'" /><div class="select-list"><ul>',selectListHTML='';for(var i=0;i<selectLength;i++){if(i!==selectedIndex){selectListHTML=selectListHTML+'<li data-value="'+selectOptionValue[i]+'">'+selectOptionText[i]+'</li>'}else{selectListHTML=selectListHTML+'<li data-value="'+selectOptionValue[i]+'" class="selected">'+selectOptionText[i]+'</li>'}}selectHTML=selectHTML+selectListHTML+'</ul></div></div>';return selectHTML},replaceProtoypeSelect:function(element){var that=this,$this=$(element),selectHTML=that.renderSelect($this);$this.replaceWith(selectHTML)},setSelectDisabled:function(element){var that=this,$this=$(element),selectID='#'+that.getSelectID($this);$(selectID).children('i').addClass('disabled').end().children('.select-button').attr('disabled','disabled')},setSelectEnabled:function(element){var that=this,$this=$(element),selectID='#'+that.getSelectID($this);$(selectID).children('i').removeClass('disabled').end().children('.select-button').removeAttr('disabled')},setSelectStyle:function(element){var that=this,$this=$(element),selectID='#'+that.getSelectID($this),selectLength=that.getOptionCount($this);$(selectID).css({'z-index':that.setStyleProperty(that.settings.zIndex),width:that.setStyleProperty(that.settings.width)-2+'px',height:that.setStyleProperty(that.settings.height)+'px'});$(selectID).children('.select-down').css({top:that.setStyleProperty((that.settings.height-that.settings.triangleSize)/2)+'px','border-width':that.setStyleProperty(that.settings.triangleSize)+'px','border-color':that.setStyleProperty(that.settings.triangleColor)+' transparent transparent transparent'});$(selectID).children('.select-button').css({width:function(){if(!that.settings.width){return}else{return that.settings.width-2+'px'}},height:that.setStyleProperty(that.settings.height)+'px',border:that.setStyleProperty(that.settings.border),'border-radius':that.setStyleProperty(that.settings.borderRadius)+'px'});$(selectID).children('.select-list').css({width:function(){if(!that.settings.width){return}else{return that.settings.width-2+'px'}},'top':function(index,value){if(!that.settings.height){return}else{if(!that.settings.topPosition){return that.settings.height+1+'px'}else{if(!that.settings.optionHeight){}else{return-that.settings.optionHeight*selectLength-3+'px'}}}},'max-height':that.setStyleProperty(that.settings.showMaxHeight)+'px'});$(selectID+' ul').css({'max-height':that.setStyleProperty(that.settings.showMaxHeight)+'px','line-height':that.setStyleProperty(that.settings.optionHeight)+'px'});$(selectID+' li').css({height:that.setStyleProperty(that.settings.optionHeight)+'px'})},setStyleProperty:function(styleProperty){if(!styleProperty){return}else{return styleProperty}},setSelectEvent:function(element){var that=this,$this=$(element),showSpeed=that.settings.speed,border=that.settings.border,selectID='#'+that.getSelectID($this),selectName=that.getSelectName($this),selectedIndex=that.getSelectedIndex($this),selectLength=that.getOptionCount($this),selectBtn=$(selectID+' input[type="button"]'),selectItem=$(selectID+' li');if(that.settings.enable){$(selectID).click(function(event){event.stopPropagation();$(this).children('.select-list').slideToggle(showSpeed);if(that.settings.border){$(this).css({border:border})}else{$(this).addClass('focus')}$(this).find('li').each(function(){if($(this).text()===selectBtn.val()){$(this).addClass('selected').siblings().removeClass('selected')}})}).on('focusin','input[type="button"]',function(){$('.select-wrapper').children('.select-list').slideUp(showSpeed);if($('.select-wrapper').hasClass('focus')){$('.select-wrapper').removeClass('focus')}}).on('keyup','input[type="button"]',function(event){var $selectedItem=$(this).siblings('.select-list').children().children('li.selected');switch(event.keyCode){case 13:$(this).val($selectedItem.text()).prev().prev().val($selectedItem.attr('data-value'));if($.isFunction(that.settings.onChange)){that.settings.onChange.call(that)}break;case 27:$(this).siblings('.select-list').slideUp(showSpeed);break;case 38:event.preventDefault();if(selectedIndex!==0){$selectedItem.removeClass('selected').prev().addClass('selected');selectedIndex=selectedIndex-1}else{$selectItem.last().addClass('selected').siblings().removeClass('selected');selectedIndex=selectLength-1}$selectedItem=$(this).siblings('.select-list').children().children('li.selected');$(this).val($selectedItem.text()).prev().prev().val($selectedItem.attr('data-value'));break;case 40:event.preventDefault();if(selectedIndex<selectLength-1){$selectedItem.removeClass('selected').next().addClass('selected');selectedIndex=selectedIndex+1}else{$selectItem.first().addClass('selected').siblings().removeClass('selected');selectedIndex=0}$selectedItem=$(this).siblings('.select-list').children().children('li.selected');$(this).val($selectedItem.text()).prev().prev().val($selectedItem.attr('data-value'));break}}).children('i').removeClass('disabled').end().children('.select-button').removeAttr('disabled');selectItem.on('click',function(event){event.stopPropagation();$(this).addClass('selected').siblings().removeClass('selected').parent().parent().slideUp(showSpeed).prev().val($(this).text()).siblings('input[type="hidden"]').val($(this).attr('data-value'));if($('.select-wrapper').hasClass('focus')){$('.select-wrapper').removeClass('focus')}if($.isFunction(that.settings.onChange)){that.settings.onChange.call(that)}return false}).hover(function(){$(this).addClass('selected').siblings().removeClass('selected')}).mouseenter(function(event){var target=event.target,realWidth=target.offsetWidth,wrapperWidth=target.scrollWidth,text=$(target).text();if(realWidth<wrapperWidth){$(target).attr("title",text)}})$(document).on('click',function(){$(this).find('.select-list').slideUp(showSpeed);if($('.select-wrapper').hasClass('focus')){$('.select-wrapper').removeClass('focus')}})}else{$(selectID).children('i').addClass('disabled').end().children('.select-button').attr('disabled','disabled');return}}};$.fn[pluginName]=function(options){this.each(function(){if(!$.data(this,"plugin_"+pluginName)){$.data(this,"plugin_"+pluginName,new SelectList(this,options));if(!options.topPosition){options.zIndex--}else{options.zIndex++}}});return this}})(jQuery,window,document);
5、书写并添加js代码。<script src="js/jquery-1.9.1.min.js"></script><script src="js/jquery.selectlist.js"></script><script> $(function(){ $('select').selectlist({ zIndex: 10, width: 300, height: 40 }); })</script>
6、查看效果
