传智博客
快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

select下拉菜单readonly只读

2017-12-4 11:31| 发布者: admin| 查看: 246| 评论: 0|来自: 蚂蚁部落

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); 
});

鲜花

握手

雷人

路过

鸡蛋

最新评论

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

GMT+8, 2017-12-11 19:07 , Processed in 0.067384 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部