欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

用JavaScript来美化HTML的select标签的下拉列表效果_javascript技巧

程序员文章站 2022-05-13 18:13:44
...
首先通过一个例子来回顾一下select标签的用法:

然后效果一般时这样的:

用JavaScript来美化HTML的select标签的下拉列表效果_javascript技巧

美与丑暂且不论...所有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'+setFixDivText($(select).val())+ '
' ); 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);