基于jquery实现下拉框美化效果

通常的原生选择下拉框大部分样式无法修改，导致不同浏览器的设计图样式不同。所以为了美化，用JQ模拟一个下拉框，样式可以随意定义。原生下拉框也在div中保持隐藏，方便后台开发者操作。

效果图如下：

HTML代码如下：

！doctype html lang=' zh-cn ' head meta charset=' utf-8 ' title下拉框美化/title link href=' CSS/style . CSS ' rel='样式表'/脚本src=' http : js/Jquery-1 . 9 . 1 . min . js '/script script src=' http : js/simselect . js '/script script $(function(){//以下是调用初始化语句，类名可以是universal，也可以是$(选择框')。simSelect()可以通过ID单独定义。//无参数，默认样式。建议用这个，参数要写在div上，比较直观。$('.SLT-box 01’)。simSelect({ //所有参数如下：maxnum3360 4，//最大下拉次数(超过会显示滚动条)，默认为5wid3360 250，//下拉框的框宽默认为200px。为了避免设置过多的宽度，请尝试根据项目中最常见的宽度来设置css样式。Direction: 'down '，//下拉方向，默认为down，另一个为up disabled: false //如果禁用，默认不能禁用，如果禁用，则为true })；$('.SLT-box 02’)。simSelect({ //示例：这里写参数时，参数也写在div上。结果是：以上div为准。maxnum : 4，宽度： 250，方向： ' down ' })；$('.SLT-box 03’)。simSelect({ //如果下拉框被禁用，有三种方法可以写，可选。建议第二个：disabled:true。//1:此处参数写Disabled3360 True2:将class='disabled '添加到div3:将disabled=' true ' width: 250 }添加到native select)；$('#slt-box04 ')。simSelect()；//ID单独定义。可以禁用单个选项})；/剧本/床头柜！-不需要包装和表格。仅用于布局-div class=' wrap '表宽=' 600' tbody tr th不带参数：/th TD div class=' select-box ' select Option第一选项/option第二选项/option第三选项/Option第四选项/option第五选项/option第六选项/option/select/div/TD/tr th初始化语句已写入参数：/th TD div class=' SLT-box 01 ' select Option第一选项/Option第二选项/option第三选项/option第四选项/option第五选项/Option第六选项/option /select /div/td th div class=' SLT-box 02 up ' max-num=' 6 ' width=' 300 '选择选项第一选项/选项第二选项/选项第三选项/选项第四选项/选项第五选项/选项第六选项//选项/选择/div/TD/tr th tr th tr th disabled style:/th TD div class=' SLT-box 03 '选择选项第一选项/选项第二选项/选项第三选项/选项第四选项/选项第五选项/选项第六选项/选项/选择/div/TD/tr th tr th选项之一th div id=' SLT-box 04 ' class=' up ' max-num=' 4 ' width=' 200 '选择选项第一选项/选项第二选项超长超长超长/选项禁用='true '第三选项/选项第四选项/选项第五选项/选项第六选项/选项/选择/div/TD/tr/tbbody/table/div/body/html CSS样式如下：

@ charset“utf-8”；/* 简单复位*/车身、ul、李{保证金： 0；padd : 0；}车身{ font: 14px/24px微软雅黑；color : # 333 } ul { list-style :无；} a { color: # 333outline:无；文本装饰：无；}表格{边框-折叠：折叠；边框间距： 0;文本-左对齐：}/* 布局样式，非必须*/.包装{ width : 600 pxmargin : 100 px自动0;padding: 20px背景-color : # d3f3dd；}.包裹桌子。包装表td { padding: 8px 2px }。正常换行；文本对齐：右侧；}/* 下拉框样式必须*/.select-style ul { list-style : no；padd : 0；保证金： 0；}.选择样式选择{ display:无}。选择样式{ position:相对；显示器：内联块；字体系列：微软雅黑；color : # 666 font-size : 14px；文本-左对齐：垂直对齐： 中间；z指数： 50;}.选择样式。focus { z-index : 51}.选择样式SLT-wrap { display : in-block；宽度： 200像素；border:固体1px # d6d6d6垂直对齐： 中间；}.选择样式。聚焦SLT包装{边框：实心1px # 53 a8df}.选择样式{ position:相对；显示器：块；padding: 0 36px 0 5px线高： 30px高度： 30px文本装饰：无；背景-color : # fff；断字：断字；颜色： # 666飞越：隐藏；}.选择样式。标题SLT-文本{显示：内嵌块；高度： 30px *光标：指针；}.选择样式SLT-标题一{绝对位置：右： 0；top : 0；显示器：内联块；宽度： 30px高度： 30px背景：网址(./images/ico-select.png) 0 0不重复；*光标：指针；}.选择样式。聚焦SLT-标题一{背景-位置： 0-30px；}.select-style . disableslt-title I { background-position : 0-60px；*光标：默认；}.选择样式OPN盒子{显示器：无；绝对位置：左： 0；top: 31px宽度： 100%;}.选择样式。向上OPN-box { top : auto；bottom: 31px}。选择样式opn .盒OPN-列表{位置：相对；_ width : 100%；最大高度： 130像素；border: 1px固体# d6d6d6背景# fff溢出-y:自动；溢出-x:隐藏；}.选择样式。聚焦opn .盒OPN-列表{边框颜色： # 53 a8df}.选择样式opn .盒列表李{显示： }块；_ width : 100%；左衬垫左： 5px线高： 26px高度： 26px飞越：隐藏；空白： nowrap文本-飞越：省略号；光标：指针；}.选择样式opn .盒opn-list .所选{ background: # d4edfe }。选择样式opn .盒李：悬停列表；背景# 65abda}。选择样式opn .盒名单李。禁用{ color : # cacaca背景技术： # f0f 0；光标：默认值；}.select-style . disabled SLT-wrap { border : 1px固体# d6d6d6}。select-style . disableslt-title { color : # cacaca；背景-颜色： # f0f 0；光标：默认值；}.选择样式。已禁用标题slt-text { *cursor:默认值；}/* 下拉框样式结束*/Jquery代码如下：

/** *名称：美化下拉框**/(函数(jQuery){ $.fn.simSelect=函数(o) { o=$ .扩展({ //设置默认参数maxNum: 5，//最大显示5个宽度： 200,//默认宽200像素。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定钢性铸铁样式方向："向下",//向下拉，另一个是up disabled: false //不可用时为true }，o | | { })；返回this.each(function(){ //构造开始if($(this).孩子们SLT包装'){//去重复$(这个)。孩子们SLT包装公司.移除();};var $ts=$(this)，$select=$ts.find('select ').eq(0)，wid=parseFloat($ts.attr('width '))，num=parseFloat($ ts)。attr(' max-num ')，$ sltWrap=$(' div class=' SLT-wrap '/div ').prependTo($ts)，$ sltTit=$(' a class=' SLT-title ' hide focus=' true ' href=' JavaScript : void(0)；SLT-文本'/我/a ').prependTo($sltWrap)，$sltText=$(' .slt-text '，$sltTit)，$ OpnBox=$(' div class=' OPN-box ' ul class=' OPN-list '/ul/div ').appendo($ sltWrap)，$opnList=$(' .opn-list '，$ Opnbox)；$ ts。add CLaSS(' select-style ')；//增加一个班级专门作为写钢性铸铁样式用$select.find('选项').每个（函数{//循环生成里标签var text=$(this).text()，$ Li=$(' Li title=' ' text ' ' ' text '/Li ').appendo($ OpnList)；如果(这个。精选){ $李。addCLaSS('选定')；$sltText.text(文本)。attr('title '，text)；};如果(这个。禁用){ $李。add CLaSS(' disabled ')；返回；};});var $li=$('li '，$opnList)，hei=$ Li。高度()；if(wid){ //设置宽度$ts.css('width '，wid ' px ')；//兼容IE6、7 $sltWrap.css('width '，wid-2 ' px ')；}else{ $ts.css('width '，o . width ' px ')；//兼容IE6、7 $sltWrap.css('width '，o . width-2 ' px ')；};if(num){ //设置高度$opnList.css('最大高度，hei * num ' px ')；} else{ $opnList.css('max-height '，hei * o . MaxNum ' px ')；};if(o.direction=='up'){ //设置上、下拉方向$ ts。addCLaSS(' up ')；};$li.on('click '，function(){ //li标签的点击事件，传给原生选择var index=$opnList.find('li ').索引(这个)，文本=$(这个).text()；if($(this).具有类(' disabled '){ return false；};$(这个)。addClass(')选定')。兄弟姐妹()。removeClass(“”选定');$select.find('选项').道具('选中，假)。eq(指数)。道具('选中，真);$sltText.text(文本)。attr('title '，text)；$ Opnbox。hide()；$ts.removeClass('焦点');});$sltTit.on('点击'，函数(e){ //a标签的点击下拉事件e . stopperpagation()；//阻止a标签的点击冒泡if($ Opnbox。是(' :隐藏'){ $(').选择样式opn-box ').hide()；$('.选择样式').removeClass(“”焦点');$ Opnbox。show()；$ ts。addCLaSS(' focus ')；} else { $ Opnbox。hide()；$ts.removeClass('焦点');} });$select.on('change '，function(){ //原生挑选的点击事件，传给ul var索引=$(这个).查找(“option:selected”).index()，text=$li.eq(index).text()；$li.eq(指数)。addClass(')选定')。兄弟姐妹()。removeClass(“”选定');$sltText.text(文本)。attr('title '，text)；});$(文档)。打开('点击'，函数(e){ //点击其他地方收起下拉框if($ Opnbox。是(' :可见'){ $ Opnbox。hide()；$ts.removeClass('焦点');} });if($ select。prop(' disabled ')==true | | o . disabled==true | | $ ts。有类(' disabled '){ $ slttit。关闭(“点击”)；//设置禁用状态$select.prop('disabled '，true)；$ ts。add CLaSS(' disabled ')；};});};})(jQuery)；兼容到IE7 (IE6其实也行，只是选项多于5个下面不会出现滚动条)。

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助。