html中select readonly/disabled问题的解决方案

在html中，对select标签添加readonly属性后，依旧能够下拉选择，证明readonly属性对html中的select标签并不起作用。

经查W3C文档，select标签只对disabled属性起作用，但是添加disabled后，form提交的时候，会忽略掉所有带disabled的标签的值，对提交造成麻烦。

所以针对上述问题，总结出以下两种解决方案来达到select标签实现readonly属性的目的：

解决方案一：

onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"

或者：

$("select[readonly=readonly] option").attr("disabled","disabled");

解决方案一通过js方式来达到目的，但是这样依旧能够看到其它选项。

怎么让其它选项也无法看到呢？

我尝试了用js控制,可是option选项要么删除，要么隐藏，而且实现过程比较复杂。

所以推荐使用解决方案二。

解决方案二：

select[readonly] {
	background: #eee;
	cursor: no-drop;
}

select[readonly] option {
	display: none;
}

解决方案二通过css样式解决，无法看到其它option选项，且带有鼠标不可以下拉提示图标，这种解决方案最优秀且简单。