位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享用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

标签: js如何使用

本文链接地址:https://www.jiuchutong.com/biancheng/384636.html 转载请保留说明!

上一篇:JavaScript设置、获取、清除单值和多值cookie的方法(JavaScript设置字体颜色)

下一篇:总结JavaScript中布尔操作符||与&&的使用技巧(简述javascript中的函数)

  • 企业所得税汇算清缴补缴税款分录
  • 免抵税额计入什么科目
  • 测试收入的钱怎么用
  • 会计做账借贷怎么做
  • 公司转让住房是什么意思
  • 其他收益科目账务处理
  • 公司每月利润明细表
  • 预付房租发票未到分录
  • 暂估费用发票没到会计分录怎么写?
  • 借别人的公账转账犯法吗
  • 存货盘盈与盘亏
  • 企业合并以外
  • 销项负数发票怎么填报增值税报表
  • 税率开错跨月没法收回
  • 个体工商户税务登记证需要什么资料
  • 预缴税款的附加税可以抵扣吗
  • 增值税报表上填写什么
  • 企业所得税免征和不征
  • 销售商品货款已预收
  • 进项和销项单价的比例
  • 应交税费的明细账怎么手工登记
  • 给客户的贴息的会计处理
  • redhat5.6安装
  • windows11 缩放
  • php写json
  • wordpress如何使用
  • 新的磁贴
  • deepin 终端命令
  • s24evmon.exe - s24evmon是什么进程 有什么用
  • win11怎么清理内存
  • 如何修复面部毛孔粗大
  • 发放应付职工薪酬是借方还是贷方
  • 德比郡在哪
  • 表单校验html5
  • phpstudy访问数据库
  • 本期发出存货成本是什么意思
  • 企业清算时
  • 结转成本类账户到本年利润的会计分录
  • redux-tookit
  • vue插槽类型
  • unplugin-auto-import github
  • Laravel4中的Validator验证扩展用法详解
  • 域名续费多久生效
  • python每行输出五个且对齐
  • 基于个人同意处理个人信息的个人什么撤回其同意
  • 注册公司冠名省需要多少注册资金
  • p f和p a的区别
  • 损益表填制
  • 认缴怎么填
  • 运输发票抵扣税额怎么算
  • 建设工程合同从完成承包的内容进行划分
  • 小型生产加工企业税率
  • 出现什么情况企业不能持续经营
  • 一般纳税人增值税怎么算
  • 资源税的账务处理
  • 买两个能退一个吗
  • 主营业务税金及附加借贷方向
  • 代开发票的弊端是如何体现的?
  • 预收账款是否要交说
  • 发票红冲重新开具怎么做分录
  • 电费发票未到怎么入账
  • 会计凭证会计账簿与账务处理程序
  • 用企业管理器创建一个备份设备
  • Mysql使用insert插入多条记录 批量新增数据
  • sql替换快捷键
  • sqlserver存储过程返回多个结果集
  • 运行软件时遇到的问题
  • kms激活的弊端
  • fedora phpMyAdmin 安装方法及介绍
  • win8修改锁屏壁纸
  • 工商网银安装
  • jquery的validate前端表单验证
  • jquery validate文档
  • unity3d跑酷游戏教程
  • node.js入门
  • 安卓开源好处
  • jquery如何做登录
  • jquery鼠标移动触发
  • 上海市个人所得税计算
  • 为什么医保的钱可以取出来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设