油盐不进的select元素

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

  1. select 不存在站位文本,即不存在placeholder属性。
    没有这个属性,导致最大的问题就是select框显示值必须是其option里的一项,这也就是select无法实现input的placeholder效果。现在网上的一些dropdown控件实现这个效果,他们都是把把select用Div,ui,li加上js模拟出来的。

  2. 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.csdn.net/huozhicheng/article/details/5416060

猜你喜欢

转载自www.cnblogs.com/jlfw/p/12653255.html
今日推荐