js 模拟 select 的 click 事件

法一、

你可以直接通过修改 select 的 size 属性来实现,但是这样比较丑,很明显;
原来:

image

修改 size:

image

跟原生比丑在两点:

  1. 位置上移了
  2. 滚动条出现了

法二、

比较好的实现,就是通过 js clone 一个 select,原来的 select 暂且称为 selectA,克隆后的 select 暂且称为 selectB;

题主这边点击 img 的时候,修改 selectB 的 size,这个时候option就都出来了,然后把它往下移到selectA 下面,解决了位置的问题;

然后修改宽度和overflow属性,一般情况下,比如 option 少于 10条时,不显示滚动条;大于 10 条时,再显示滚动条;这样就模拟了selectA 的点击情况,解决了滚动条的问题;

最后再监听 selectB 的 change 事件来修改 selectA 的值;

demo

参考文档:

Simulate click on select element with jQuery

转载于:https://www.cnblogs.com/xianshenglu/p/8393533.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值