select的readonly和disabled

最新推荐文章于 2024-07-10 10:11:57 发布

SHUIPING_YANG

最新推荐文章于 2024-07-10 10:11:57 发布

阅读量2.5k

点赞数

分类专栏： javascript

原文链接：http://www.softwhy.com/article-8253-1.html

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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> 
window.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"> 
window.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>