html下拉框只读,html中select readonly/disabled问题的解决方案

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

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

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

解决方案一：οnfοcus="this.defaultIndex=this.selectedIndex;" οnchange="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选项，且带有鼠标不可以下拉提示图标，这种解决方案最优秀且简单。