之前在学习过程中,发现 select
的 option
标签无法添加事件。
查阅了一些博客资料后找到了答案。
解决方法
通常 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
来自定义选择框,也是很好的办法