2010.03.06 — 更新

建议使用:http://www.aqee.net/docs/Chosen/Chosen.htm

将下拉菜单设置为不可用:也就是将select下拉菜单设置为disabled不可用。但是缺点非常明显,那么就是下拉菜单的数据无法被提交。

方式一:

利用脚本固定选中项:
设置为只读就是无法选中其他的项,本方式就是利用脚本固定选中的option。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>.onload=function(){
let st=document.getElementById("st");
st.onfocus=function(){
this.defaultIndex=this.selectedIndex;
}
st.onchange=function(){
this.selectedIndex=this.defaultIndex;
}
}</script>
</head>
<body>
<select id="st">
<option>蚂蚁部落一</option>
<option>蚂蚁部落二</option>
<option selected>蚂蚁部落三</option>
<option>蚂蚁部落四</option>
<option>蚂蚁部落五</option>
</select>
</body>
</html>

方式二:

设置下拉菜单为不可用,将value值写入隐藏框:
将select下拉菜单设置为不可用。
虽然下拉菜单无法提交但是可以将下拉菜单的值赋值给隐藏控件。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">.onload=function(){
var osel=document.getElementById("sel");
var ohid=document.getElementById("hid");
ohid.value=osel.value;
}</script>
</head>
<body>
<select id="sel" disabled>
<option value="0">蚂蚁部落一</option>
<option value="1">蚂蚁部落二</option>
<option value="2" selected="selected">蚂蚁部落三</option>
<option value="3">蚂蚁部落四</option>
<option value="4">蚂蚁部落五</option>
</select>
<input type="hidden" id="hid"/>
</body>
</html>