select的readonly和disabled

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值