使selection 中的 option 标签支持事件监听

之前在学习过程中,发现 selectoption 标签无法添加事件。
查阅了一些博客资料后找到了答案。

解决方法

通常 option 标签不支持添加事件以及监听
但若是往 select 标签中添加 size 属性,则可以解决此问题(size属性必须大于1

下面看一看例子

//HTML
<select size="2" style="overflow: scroll;height: 53px;width: 60px;">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
</select>

//JS
let op = document.getElementsByTagName('option')
op[0].addEventListener("click", () => console.log(op[0].value))

效果如下:
在这里插入图片描述
事件也可以成功触发。

2.问题

这种方式依然会有一些问题
选择框变成了滚动框,如果想让他变成选择框,还要进行一些处理。
但是这在只需要滚动选择框时也是一个不错的选择。

同样的也可以自己使用 ul li 来自定义选择框,也是很好的办法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值