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;
- 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>
html中select只读显示的更多相关文章
- 只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法
七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...
- 七种数据库中Select Top的使用方法 (只显示数据库的几条记录)
七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELE ...
- SQL Server中SELECT会真的阻塞SELECT吗?
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
- 项目实例——多表关联查询判断A的字段是否在B中,在显示该字段值,不在显示空;B的字段是否在C中,在显示该字段值,不在显示空。
1.需求: (1)三张表A.B.C 三个表id相同,如果A表中的name在B表中的bname中显示aname值,否则显示空:如果C表中的addr在B表中的tel显示addr,否则显示空 2.实现方式 ...
- 查询语句中select from where group by having order by的执行顺序
查询语句中select from where group by having order by的执行顺序 1.查询中用到的关键词主要包含六个,并且他们的顺序依次为 select--from--w ...
- mysql进阶(四)mysql中select
mysql中select * for update 注: FOR UPDATE 仅适用于InnoDB,且必须在事务区块(BEGIN/COMMIT)中才能生效. 作用 锁定该语句所选择到的对象.防止在 ...
- springboot中使用mybatis显示执行sql
springboot 中使用mybatis显示执行sql的配置,在properties中添加如下 logging.你的包名=debug 2018-11-27 16:35:43.044 [DubboSe ...
- SQLite中SELECT基本形式
SQLite中SELECT基本形式 每个数据库通常都包含多个表,而每个表又包含多条数据.要获取数据库中的数据,就需要SQL语言提供的查询语句SELECT.本章将讲解和SELECT语句相关的内容,其中包 ...
- QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据
QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 參考链接: http:// ...
随机推荐
- CSS3-样式继承,层叠管理,文本格式化
- 虚拟机CentOS-mini安装完成后的网络设置
系统环境:虚拟机, CentOS-mini,x86-64, 1. 主机名设置 涉及的文件: /etc/hostname; /etc/sysconfig/network 1.1 在/etc/hostn ...
- iOS学习01C语言数据类型
1.注释 // 单行注释 // 注释对代码起到解释说明的作用,注释是给程序员看的,不参与程序运行 /* 多行注释 Xcode快捷键 全选 cmd+a 复制 cmd+c 粘贴 cmd+v 设 ...
- Storm实战:在云上搭建大规模实时数据流处理系统(Storm+Kafka)
在大数据时代,数据规模变得越来越大.由于数据的增长速度和非结构化的特性,常用的软硬件工具已无法在用户可容忍的时间内对数据进行采集.管理和处理.本文主要介绍如何在阿里云上使用Kafka和Storm搭建大 ...
- webpack练手项目之easySlide(三):commonChunks(转)
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...
- ACM 盗梦空间
盗梦空间 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入梦境之中,梦境里的时间会比现实中 ...
- Vijos1448校门外的树 题解
Vijos1448校门外的树 题解 描述: 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的…… 如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现 ...
- The Skins of the Substance
This blog is about a java jar file : Substance.jar well, you can get it from links as below: http:// ...
- Pop3_解决PKIX:unable to find valid certification path to requested target 的问题
最近有公司pop3协议接收pp邮箱出现异常,连不上服务器,错误内容: e: sun.security.validator.ValidatorException: PKIX path building ...
- be supposed to
be supposed to 期望; 認為必須, 認為應該; 認為...... 期望; 認為必須, 認為應該; 認為...必要 Am I supposed to clean all the rooms ...