html中select只读显示
因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的。现提供以下几种解决方案:
1、在html中使用以下代码,在select外层加1个span,通过js控制。这种设置的不足之处是IE浏览器兼容,fireFox及其他不兼容..
- <span οnmοusemοve="this.setCapture();"οnmοuseοut="this.releaseCapture();" οnfοcus="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" οnchange="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, 故有上面的οnchange="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" οnclick="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>
转载于:https://www.cnblogs.com/telwanggs/p/5822926.html
html中select只读显示相关推荐
- C# 选中 DataGridView 控件中的行时显示不同的颜色
可以利用 DataGridView 控件的 SelectionMode.ReadOnly 和 SelectionBackColor 属性实现当选中DataGridView控件中的行时显示不同的颜色. ...
- 解决echart在tab中切换时显示不正确
在VUE使用Element UI时,在el-tab-pane添加上lazy='true'属性即可 <el-tab-pane label="远程测试控制" name=" ...
- SQL Server中SELECT会真的阻塞SELECT吗?
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
- Angularjs 中select回显后重复选项的解决
Angularjs 中select回显后重复选项的解决 (1)Angularjs 中select回显代码,records和categoryValueList都是后台返回的 <!DOCTYPE h ...
- SQLite中SELECT基本形式
SQLite中SELECT基本形式 每个数据库通常都包含多个表,而每个表又包含多条数据.要获取数据库中的数据,就需要SQL语言提供的查询语句SELECT.本章将讲解和SELECT语句相关的内容,其中包 ...
- 如何根据用户权限屏蔽或显示SAP的订单中的成本显示
程序目的说明: 1. SAP标准程序不能在销售订单(va01 va02 va03)中根据权限显示或不显示有些订单定价过程的敏感数据. 2. 由于公司需要对销售订单定价过程的敏感数据(如成本数 ...
- MySQL中SELECT语句简单使用
MySQL中SELECT语句简单使用 最近开始复习mysql,查漏补缺吧. 关于mysql 1.MySQL不区分大小写,但是在MySQL 4.1及之前的版本中,数据库名.表名.列名这些标识符默认是区分 ...
- js中select下拉框重置_Web测试中需要注意的16个小细节
随着Internet和Intranet/Extranet的快速增长,Web已经对商业.工业.银行.财政.教育.政府和娱乐及我们的工作和生活产生了深远的影响.许多传统的信息和数据库系统正在被移植到互联网 ...
- [JavaScript]利用JavaScript控制table中row的显示
在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能. NoneRow1Row2Row3 Row1 Row2 Row3 JavaScript < ...
最新文章
- java的css的块_CSS块宽度不大于前一个块
- 《引爆点》读书笔记(一)
- MessageBox模态对话框[转]
- maven scope使用和理解
- NLPIR语义智能平台支持大数据个性化学习
- Beta阶段第1周/共2周 Scrum立会报告+燃尽图 06
- TCHAR、WCHAR、CHAR以及WideCharToMultiByte、MultiByteToWideChar
- SQL Server2008 错误源:.net SqlClient data provider的解决方法
- 大学计算机实验教程实验报告2.2,大学计算机实验2 实验报告.pdf
- 利用遗传算法求解旅行商问题
- 易鲸捷数据库(EsgynDB)常用SQL
- IE11 js导出excel提示Automation 服务器不能创建对象
- 试试Live Witer
- 技术人员的狂欢 | 看雪2020第四届安全开发者峰会顺利落幕
- Paddle 点灯人 之 Tensor
- map和multimap的用法详解
- 编程语言-什么是高级语言?
- Fitbit Flex
- 华硕笔记本扇热声音大
- threeJS中4*4矩阵实现平移和旋转的原理