油盐不进的select元素

最新推荐文章于 2025-09-09 16:53:48 发布

转载最新推荐文章于 2025-09-09 16:53:48 发布 · 53 阅读

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004531203

文章标签：

本文探讨了浏览器对Select控件的不同解析方式及其实现限制，包括缺失占位符文本、无法直接修改Option项行为及样式等问题，并提供了一些解决思路。

最近项目中用到下拉列表，由于浏览器对下拉列表的解析不一样，且项目要求要用各自浏览器自带的select效果。这个让我彻底放弃了使用别人写的下拉列表控件（比如： bootstrap dropdown）。
下面是我select的一些总结。

select 不存在站位文本，即不存在placeholder属性。
没有这个属性，导致最大的问题就是select框显示值必须是其option里的一项，这也就是select无法实现input的placeholder效果。现在网上的一些dropdown控件实现这个效果，他们都是把把select用Div，ui，li加上js模拟出来的。
select的option项油盐不进。
有时候我们希望当用户点击option时触发一个js方法。很抱歉这个无法实现，因为option的事件都被select本身控制了。还有就是在option里面或者外面加元素都是不好用的，比如像下面这段代码。当时的想法是在option里面或外面套一个，然后获取外面元素的事件，这样就可以模拟option被点击的事件，但是可惜没有成功。在外面加元素会让select无法认识option，就会排除这一项。所以大部分监听事件都是在select上监听，比如用onChange。

 <select>
 <span><option>good</option></span>
 <option><span>well<span></option>
 </select>

option里添加样式也是无效的，select本身已经给样式了，不接收其他的样式。所以更改样式只能在select标签上更改。
附上 select的事件，属性和方法
http://blog.youkuaiyun.com/huozhicheng/article/details/5416060