用JavaScript来美化HTML的select标签的下拉列表效果(js如何使用)

发布时间：2024-02-27

推荐整理分享用JavaScript来美化HTML的select标签的下拉列表效果(js如何使用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js怎么用,javascript可以用什么工具编写,javascriptz,javascript之美,javascript之美,javascriptz,javascriptz,如何用javascript,内容如对您有帮助，希望把文章链接给更多的朋友！

首先通过一个例子来回顾一下select标签的用法：

然后效果一般时这样的：

美与丑暂且不论...所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：不同的浏览器显示的默认下拉框样子不完全相同IE下无法手动设置select的高度（这是最坑爹的！），只能靠font-size撑起来select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进行美化总结起来，解决办法主要有：

将select隐藏掉，而使用div进行模拟将select透明度设置为0，然后使用相对定位在下方加一个长得很像select又美化了的div

用JavaScript来美化HTML的select标签的下拉列表效果(js如何使用)

隐藏方案一般原理如下：找到页面需要处理的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上先上代码吧：

插件代码运行：

下面是html代码：

兼容主流浏览器。但也还是有个重大的缺陷，在老版本的ie中，真正select的高度还是无法撑开。所以，用户点击模拟的select的靠下方的位置会发现select无法展开！！不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。另外，在测试后，发现如果select处于一个隐藏的容器中，那么显示后，select的位置是一个空白！！这是怎么回事呢？！原来，html元素隐藏后是无法获取他的屏幕坐标的！！！所以这时候显示出来，真正的select完全透明了，而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为（0,0）不要着急，这个问题有下面的解决办法：1、单独写代码触发select的美化程序首先，你需要将上面的美化程序运行代码做以下修改：

然后，在隐藏的select上加属性autoFix="false"：

然后，在外部容器显示的时候，手动调用$("#sex").selectFix() 2、如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：在美化程序中，先判断select是否隐藏，如果否逻辑不变，如果隐藏，则加入一个timer，循环判断元素是否被显示，在其显示的时候再自动调用fix，然后将timer移除代码如下：

运行代码跟原来的不变。

总结JavaScript中布尔操作符||与&&的使用技巧你是否看到过这样的代码：a=a||"";可能javascript初学者会对此感到茫然。今天就跟大家分享一下我的一些心得。其实：a=a||"defaultValue";a=a||"defaultValue";与：i

JS实现选项卡实例详解本文实例讲述了JS实现选项卡的方法。分享给大家供大家参考，具体如下：思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过dis

JS封装cookie操作函数实例(设置、读取、删除) 本文实例讲述了JS封装cookie操作函数。分享给大家供大家参考，具体如下：/*设置cookie*/functionsetCookie(name,value,iDay){varoDate=newDate();oDate.setDate(oDate.getDate()+iD