快捷导航
查看: 20931|回复: 2

[分享] 设置select下拉菜单为readonly只读代码实例

[复制链接]
发表于 2014-6-18 23:39:31 | 显示全部楼层 |阅读模式
设置select下拉菜单为readonly只读代码实例:
select下拉菜单是没有readonly属性的,可能有时候我们想让它实现只读功能,有些朋友可能会想到将其设置为disabled不可用,但是这个时候select下拉菜单的数据无法提交,所以不可行,下面就介绍一下如何模拟实现下拉菜单的只读效果,实现的方式有多重,下面介绍一下常用的几种方式。
一.利用脚本固定选中项:
设置为只读就是无法选中其他的项,本方式就是利用脚本固定选中的option。
代码如下:
[HTML] 纯文本查看 复制代码运行代码
<!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");
  osel.onfocus=function(){
    this.defaultIndex=this.selectedIndex;
  }
  osel.onchange=function(){
    this.selectedIndex=this.defaultIndex;
  }
}
</script>
</head>
<body>
<select id="sel">
  <option>蚂蚁部落一</option>
  <option>蚂蚁部落二</option>
  <option selected="selected">蚂蚁部落三</option>
  <option>蚂蚁部落四</option>
  <option>蚂蚁部落五</option>
</select>
</body>
</html>

上面的代码模拟实现了readonly只读效果

二.设置下拉菜单为不可用,将value值写入隐藏框:
可以将select下拉菜单设置为不可用,虽然这时候下拉菜单无法提交,但是可以将下拉菜单的值赋值给隐藏控件,这样可以提交隐藏控件即可,代码如下:
[HTML] 纯文本查看 复制代码运行代码
<!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>

三.提交前设置为不可用,提交的时候设置为可用:
可以将下拉菜单在提交表单之前设置为disabled不可用,但是在提交表单的时候设置为可用,这样不但实现了只读效果,也可以提交数据,代码片段如下:
[JavaScript] 纯文本查看 复制代码运行代码
//提交表单前设置为不可用 
$(document).ready(function(){
  $("select[name=antzone]").attr("disabled",true);
});
//提交时设置为可用
$("input[name=bt]").click(function(){
  $("select[name=antzone]").attr("disabled",false);
});
发表于 2017-6-15 22:59:49 | 显示全部楼层
为什么不添加一个自带的呢
发表于 2017-6-25 23:55:52 | 显示全部楼层
如何不加上一个readonly呢

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-18 14:42 , Processed in 0.081703 second(s), 24 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表