HTML中的select只读
因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的。现提供以下几种解决方案:
1、在html中使用以下代码,在select外层加1个span,通过js控制。这种设置的不足之处是IE浏览器兼容,fireFox及其他不兼容.. <span onmousemove="this.setCapture();"onmouseout="this.releaseCapture();" onfocus="this.blur();">
<select id="select1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</span>
2、使用js文件,这种方法的不足之处和第一种一样。 <select name="select">
<option>aaa</option>
</select>
<script type="text/javascript">
SetReadOnly(document.getElementById("select"));
function SetReadOnly(obj){
if(obj){
obj.onbeforeactivate = function(){return false;};
obj.onfocus = function(){obj.blur();};
obj.onmouseover = function(){obj.setCapture();};
obj.onmouseout = function(){obj.releaseCapture();};
}
}
</script>
3、使用jquery方式解决。 $(function(){ $("select").attr("disabled", "disabled");
//如果和jquery1.6以上版本,可以使用以下语句:
$("select").prop("disabled", true);});
4、先将select的属性设置为
disabled="disabled"
然后在提交表单的时候使用disabled置为空。
Microsoft IE 5.5、IE 6、IE7、IE 10、Mozilla Firefox、Apple Safari 和 Opera 等浏览器对 HTML select 元素的 disabled 属性支持都很不错。而 IE 8、IE 9 和 Chrome 都有 bug,不能很好支持。不知道有没有办法在 HTML 源代码补救这一 bug。
补救办法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="Main.css" type="text/css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<select size="5" disabled="disabled">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected" class="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<select size="5">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<input type="text" />
</div>
</body>
</html>
其中 Main.css 如下所示: option.selected {
color: White;
background-color: Cyan;
}
其他改变样式,使用CSS改变文字颜色 用 CSS 定义文字颜色如下代码所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css"> select { color:red } </style>
<title>Test</title>
</head>
<body>
<div>
<select size="5" disabled="disabled">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<select size="5">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<input type="text" />
</div>
</body>
</html>
5、使用隐藏域,在select下面设置隐藏域,显示的时候disabled,提交的时候提交隐藏域中的值。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<select id="selList" onchange="setVal()">
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
</select>
<input id="hdSelList" type="text" />
<script type="text/javascript">
//本demo是为了清晰地表达, 你在select中加入 disabled="disabled",
//将input中的type改为hidden即为你要的效果了.
//提交时, 你不要取selList的值, 取hdSelList的值就好了.
setVal(); //1.在初始加载时就将两者的值设置为一致;
//2. 为了防止代码以后会有改动---有时不需要disabled, 故有上面的onchange="setVal()"
function setVal() {
document.getElementById('hdSelList').value = document.getElementById('selList').value;
}
</script>
</body>
</html>
还有下面的一种情况,页面数据太多,处理时间较长 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../ec/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
function commit() {
$DisSelects = $("select[disabled='disabled']");//获取所有被禁用的select
$DisSelects.attr("disabled", false); //处理之前, 全部打开
$("#form1").submit(); //提交
$DisSelects.attr("disabled", true); //处理完成, 全部禁用
}
</script>
</head>
<body>
<form id="form1" action="HTMLPage.htm">
<input type="button" value="submit" onclick="commit()" />
<select id="Select1" disabled="disabled" >
<option value="0" >0</option>
<option value="1" selected="selected">1</option>
</select>
<select id="Select2" disabled="disabled" >
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
</select>
<select id="Select3" disabled="disabled" >
<option value="2" >2</option>
<option value="3" selected="selected">3</option>
</select>
<select id="Select4" disabled="disabled" >
<option value="3" >3</option>
<option value="4" selected="selected">4</option>
</select>
</form>
</body>
</html>
今天在网上看到select的只读问题,第一反应是readonly,后来发现select 没有readonly,因此去网上查了一下。发现有以下解决方案:
HTML中的select只读的更多相关文章
- 设置SQLServer数据库中某些表为只读的多种方法
原文:设置SQLServer数据库中某些表为只读的多种方法 翻译自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...
- mysql: update字段中带select
update字段中带select UPDATE tb_report_type A INNER JOIN (SELECT LEVEL_CODE FROM tb_report_type WHERE id ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- Access中的SELECT @@IDENTITY
在Access数据库中存在select @@identity吗?答案是肯定的.但是Access一次只能执行一条SQL,多条SQL需要多次执行,这是限制.在SQL Server中,可以一次执行多条SQL ...
- 2.3 LINQ查询表达式中 使用select子句 指定目标数据
本篇讲解LINQ查询的三种形式: 查询对象 自定义查询对象某个属性 查询匿名类型结果 [1.查询结果返回集合元素] 在LINQ查询中,select子句和from子句都是必备子句.LINQ查询表达式必须 ...
- python中的select模块
介绍: Python中的select模块专注于I/O多路复用,提供了select poll epoll三个方法(其中后两个在Linux中可用,windows仅支持select),另外也提供了kqu ...
- 存储过程中使用select……into
在MySQL存储过程中使用SELECT -INTO语句为变量赋值: 用来将查询返回的一行的各个列值保存到局部变量中. 要求: 查询的结果集中只能有1行. SELECT col_name[,...] I ...
- I/O复用中的 select poll 和 epoll
I/O复用中的 select poll 和 epoll: 这里有一些不错的资料: I/O多路复用技术之select模型: http://blog.csdn.net/nk_test/article/de ...
- MySQL在字段中使用select子查询
前几天看别人的代码中看到在字段中使用select子查询的方法,第一次见这种写法,然后研究了一下,记录下来 大概的形式是这样的: select a .*,(select b.another_field ...
随机推荐
- 注册码_EditPlus3
1.来自"http://jingyan.baidu.com/article/67508eb4d78cfe9cca1ce488.html" Name: www.cnzz.cc Co ...
- PHP require class
- Head First 设计模式 --11 代理模式
代理模式:为另一个对象提供一个替身或占位符以控制对这个对象的访问. 代码: interface Boss { public void meeting(); } class BossImp implem ...
- C++编程小知识随手记
C++编程小知识点: (1)queue和vector类型: 加入元素 : queue是queue.push(),vector是vector.push_back(), 删除元素: queue是queue ...
- 7 -- Spring的基本用法 -- 3...
7.3 Spring 的核心机制 : 依赖注入 Spring 框架的核心功能有两个. Spring容器作为超级大工厂,负责创建.管理所有的Java对象,这些Java对象被称为Bean. Spring容 ...
- 数字图像处理作业使用OpenCV - 自定义直方图
第二次作业需要打印出来灰度直方图,当然不能使用ocv的自带calcHist函数来得到Mat对象了……结果上网搜索怎么用自己的数据创建直方图,搜到的都是直接用函数的_(:з」∠)_ 结果这个地方拖了好久 ...
- CentOS7 yum 安装git
1.查看系统是否已经安装git git --version 2.CentOS7 yum 安装git yum install -y git 3.安装成功 4.卸载git yum remove git
- socket:通常每个套接字地址(协议/网络地址/端口)只允许使用一次
有两种解决方法,一种是加入try{}catch(){},程序就不会抱错了:一种是在设置好监听SOCKET后,将SOCKET的属性设置为可重复使用地址,如://创建监听SOCKET socketList ...
- VHDL的参数写在一个vhd文件里
1 参数文件top_pkg.vhd
- SAP SE11 网格布局显示
SE11 进入数据显示界面后 在 Settings -> User Parameters, Data Browser 页面 勾选ALV Grid display 即可.