首先通过一个例子来回顾一下select标签的用法:
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
然后效果一般时这样的:
美与丑暂且不论...所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是:
不同的浏览器显示的默认下拉框样子不完全相同
IE下无法手动设置select的高度(这是最坑爹的!),只能靠font-size撑起来
select右侧的下拉箭头是无法使用背景消除的,这就导致无法使用css进行美化
总结起来,解决办法主要有:
将select隐藏掉,而使用div进行模拟
将select透明度设置为0,然后使用相对定位在下方 加一个长得很像select又美化了的div
隐藏方案一般原理如下:
找到页面需要处理的select,将其隐藏
根据select的option,创建一个li列表(当然也可以是div),并隐藏。
在select的位置创建一个div,显示select的值(selected的option)。并使用css对其进行美化,使其看起来像一个select
添加事件,使点击“select”的时候,显示li列表。并使用相对定位,让这个列表显示在“select”下方
对li列表添加事件,模拟下拉框的选值过程(点击事件和键盘↑↓事件都要模拟)
选值完成后,要将选的值显示到上方的“select”,并设置真正的select的值
当然,如果你想做的更复杂点,还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。但使用网上的插件要注意测试浏览器的兼容性,功能越复杂的模拟select,兼容性越不好做
如果,你的程序不需要那么复杂的select,那么设置透明度的第二种方案也许适合你。今天要分享给大家的也是这个方案。
它的原理如下:
找到当前页面的select,将其透明度设置为0.使其看不见,但是可以点击并选值
创建一个div,使用相对定位,放置到select下方 ,并通过css控制使其看起来像一个select。为什么一定要放在下方呢?因为这样,我们可以点击真正的select,而用户看起来像是点击的这个模拟的select,因为真正的select是完全透明的。如果放置在上方,则用户点击的是这个模拟的select,真正的select不会展开!!!
设置div的text为select的值
添加事件,使真正的select选值后,将值显示到模拟的div上
先上代码吧:
( function ($){ var selectFix= function (){ var select=$( this ); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity" :0 }); //找到select的选项 var sOptions= this .get(0).options; //设置模拟select的值 var setFixDivText= function (selectValue){ var text= "" ; for ( var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if (option.value==selectValue){ text=$(option).text(); break ; } } return text; }; //模拟的select //初始化时要将select的值传入 var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' ); select.after(selectFixDiv); var left=$(select).offset().left; var top=$(select).offset().top-1; //因为一般select都有1px的边框,所以这里往上拉1px $(selectFixDiv).css({ "top" : top, "left" : left }); //select选值时,将值显示到模拟的select上 $(select).bind( "change click" , function (){ $(selectFixDiv).text(setFixDivText($( this ).val())); }); }; $.fn.selectFix=selectFix; })(jQuery);
(function($){ var selectFix=function(){ var select=$(this); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity":0 }); //找到select的选项 var sOptions=this.get(0).options; //设置模拟select的值 var setFixDivText=function(selectValue){ var text=""; for(var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if(option.value==selectValue){ text=$(option).text(); break; } } return text; }; //模拟的select //初始化时要将select的值传入 var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>'); select.after(selectFixDiv); var left=$(select).offset().left; var top=$(select).offset().top-1;//因为一般select都有1px的边框,所以这里往上拉1px $(selectFixDiv).css({ "top" : top, "left" : left }); //select选值时,将值显示到模拟的select上 $(select).bind("change click",function(){ $(selectFixDiv).text(setFixDivText($(this).val())); }); }; $.fn.selectFix=selectFix; })(jQuery);
插件代码运行:
jQuery(document).ready( function () { var selects=$( "select.selectInput" ); if (selects.length){ selects.each( function (){ $( this ).selectFix(); }); } }); jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ $(this).selectFix(); }); } });
下面是html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML > < HEAD > < TITLE > New Document </ TITLE > < META NAME = "Generator" CONTENT = "EditPlus" > < META NAME = "Author" CONTENT = "" > < META NAME = "Keywords" CONTENT = "" > < META NAME = "Description" CONTENT = "" > < script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script > < script type = text /javascript src = "temp.js" > </ script > < style > html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} .dn {display: none;} select{cursor: pointer;} input, select, textarea, .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;} .formText, .selectInput, .text, .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} </ style > </ HEAD > < BODY > < div id = "main" > < select id = "sex" class = "selectInput" name = "sex" > < option value = "0" > 男 </ option > < option value = "1" > 女 </ option > </ select > </ div > </ BODY > </ HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type=text/javascript src="temp.js"></script> <style> html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} .dn {display: none;} select{cursor: pointer;} input, select, textarea, .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;} .formText, .selectInput, .text, .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} </style> </HEAD> <BODY> <div id="main"> <select id="sex" class="selectInput" name="sex"> <option value="0">男</option> <option value="1">女</option> </select> </div> </BODY> </HTML>
兼容主流浏览器。
但也还是有个重大的缺陷,在老版本的ie中,真正select的高度还是无法撑开。所以,用户点击模拟的select的靠下方的位置会发现select无法展开!!
不过设计的艺术在于平衡,如果你无法忍受这个缺陷,可以使用第一种解决方案。
另外,在测试后,发现如果select处于一个隐藏的容器中,那么显示后,select的位置是一个空白!!
这是怎么回事呢?!
原来,html元素隐藏后是无法获取他的屏幕坐标的!!! 所以这时候显示出来,真正的select完全透明了,而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为(0,0)
不要着急,这个问题有下面的解决办法:
1、单独写代码触发select的美化程序
首先,你需要将上面的美化程序运行代码做以下修改:
jQuery(document).ready( function () { var selects=$( "select.selectInput" ); if (selects.length){ selects.each( function (){ if (!($( this ).attr( "autoFix" )== "false" )){ $( this ).selectFix(); } }); } }); jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ if(!($(this).attr("autoFix")=="false")){ $(this).selectFix(); } }); } });
然后,在隐藏的select上加属性autoFix="false":
< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" > < option value = "0" > 男 </ option > < option value = "1" > 女 </ option > </ select > <select id="sex" class="selectInput" name="sex" autoFix="false"> <option value="0">男</option> <option value="1">女</option> </select>
然后,在外部容器显示的时候,手动调用$("#sex").selectFix()
2、如果容器的显示或者隐藏是第三方插件控制,修改不方便可考虑下面的方案:
在美化程序中,先判断select是否隐藏,如果否逻辑不变,如果隐藏,则加入一个timer,循环判断元素是否被显示,在其显示的时候再自动调用fix,然后将timer移除
代码如下:
//加上隐藏select的操作 ( function ($){ var selectFix= function (){ var select=$( this ); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity" :0 }); if (!select.is( ":hidden" )){ var sOptions= this .get(0).options; var setFixDivText= function (selectValue){ var text= "" ; for ( var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if (option.value==selectValue){ text=$(option).text(); break ; } } return text; }; var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' ); select.after(selectFixDiv); var selectWidth=$(select).innerWidth(); var selectFixDivWidth=$(selectFixDiv).innerWidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectFixDiv).css({ "top" : top, "left" : left, "margin" : 0 }); $(select).bind( "change click" , function (){ $(selectFixDiv).text(setFixDivText($( this ).val())); }); } else { var tasks = function (){ if (!$(select).is( ":hidden" )){ $(select).selectFix(); clearInterval(timer); } }; var timer=setInterval(tasks,500) } }; $.fn.selectFix=selectFix; })(jQuery);
//加上隐藏select的操作 (function($){ var selectFix=function(){ var select=$(this); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity":0 }); if(!select.is(":hidden")){ var sOptions=this.get(0).options; var setFixDivText=function(selectValue){ var text=""; for(var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if(option.value==selectValue){ text=$(option).text(); break; } } return text; }; var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>'); select.after(selectFixDiv); var selectWidth=$(select).innerWidth(); var selectFixDivWidth=$(selectFixDiv).innerWidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectFixDiv).css({ "top" : top, "left" : left, "margin" : 0 }); $(select).bind("change click",function(){ $(selectFixDiv).text(setFixDivText($(this).val())); }); }else{ var tasks = function(){ if(!$(select).is(":hidden")){ $(select).selectFix(); clearInterval(timer); } }; var timer=setInterval(tasks,500) } }; $.fn.selectFix=selectFix; })(jQuery);
运行代码跟原来的不变。
本文向大家介绍Vue.js做select下拉列表的实例(ul-li标签仿select标签),包括了Vue.js做select下拉列表的实例(ul-li标签仿select标签)的使用技巧和注意事项,需要的朋友参考一下 目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit
有时候我们会碰到<select></select>标签的下拉框。直接点击下拉框中的选项不一定可行。Selenium专门提供了Select类来处理下拉框。 <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option> <option value
本文向大家介绍jquery实现select下拉框美化特效代码分享,包括了jquery实现select下拉框美化特效代码分享的使用技巧和注意事项,需要的朋友参考一下 这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码。 为大家分享的jquery实现select下拉框美化特效代码如下 效果演示 源码下载 运行效果图: 如果大家还想深入学习,
我已经实现了一个html下拉列表,一切似乎都很好,我只想整理一下: 1) 当订单屏幕加载时,“选择”作为下拉列表上的初始选项出现。当用户单击下拉列表时,“选择”仍然出现。我想在选择下拉列表时隐藏“选择”,视图中缺少某些选项? 2)验证方面,我不能做一个订单,直到从下拉列表中选择一个选项。这是罚款,但之前我使用一个文本框,得到了一个漂亮的大红色错误消息,现在我什么都没有得到,我如何通知用户一个选项必
我有一张有多个剑道下拉列表的表格。。 有了选项标签,它显示了空白选择,但是当您打开DROPPDROW列表时,它会出现任何选择“空白区”的选项。在选择了一些下拉列表的值后,我无法返回。 我知道如果我在下拉列表中放入一些文本,选项标签就会出现在下拉列表中(css与其他文本不同)。但我想保留空白。 其他解决方案是在服务器端的第一个位置添加一个记录,但我想知道是否有人有不同的解决方案。谢啦
本文向大家介绍JavaScript实现下拉列表,包括了JavaScript实现下拉列表的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现下拉列表的具体代码,供大家参考,具体内容如下 这一次写了一个比较简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,研究了很久,发现这种js写法确实比较好用。先看一下效果。 直接上代码,js是主要写的部分,css是随意调试
本文向大家介绍jQuery下拉美化搜索表单效果代码分享,包括了jQuery下拉美化搜索表单效果代码分享的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery下拉美化搜索表单效果。分享给大家供大家参考。具体如下: JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单,样式已写好,需要的朋友改一下就可以用了。 运行效果图:-------------------查看效果-------
问题内容: 您如何以编程方式告诉HTML 下拉列表(例如,由于鼠标悬停所致)? 问题答案: 您不能使用HTML select标签来做到这一点,但是可以使用JavaScript 和 HTML 来做到这一点。有各种各样的现有控件可以执行此操作- 例如,附加到SO“有趣/忽略标签”条目的“建议”列表,或Gmail的电子邮件地址查询。 有许多提供此功能的JavaScript + HTML控件-寻找想法的自