html中select只读显示

因为Select下拉框只支持disabled属性，不支持readOnly属性，而在提交时，disabled的控件，又是不提交值的。现提供以下几种解决方案：

1、在html中使用以下代码,在select外层加1个span,通过js控制。这种设置的不足之处是IE浏览器兼容，fireFox及其他不兼容..

Html代码  

  1. <span onmousemove="this.setCapture();"onmouseout="this.releaseCapture();" onfocus="this.blur();">
  2. <select id="select1">
  3. <option value="0">0</option>
  4. <option value="1">1</option>
  5. </select>
  6. </span>

2、使用js文件，这种方法的不足之处和第一种一样。

Js代码  

  1. <select name="select">
  2. <option>aaa</option>
  3. </select>
  4. <script type="text/javascript">
  5. SetReadOnly(document.getElementById("select"));
  6. function SetReadOnly(obj){
  7. if(obj){
  8. obj.onbeforeactivate = function(){return false;};
  9. obj.onfocus = function(){obj.blur();};
  10. obj.onmouseover = function(){obj.setCapture();};
  11. obj.onmouseout = function(){obj.releaseCapture();};
  12. }
  13. }
  14. </script>

3、使用jquery方式解决。

Java代码  

  1. $(function(){ $("select").attr("disabled", "disabled");
  2. //如果和jquery1.6以上版本，可以使用以下语句：
  3. $("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。

补救办法：

Html代码  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5. <link href="Main.css" type="text/css" rel="stylesheet" />
  6. <title>Test</title>
  7. </head>
  8. <body>
  9. <div>
  10. <select size="5" disabled="disabled">
  11. <option value="C1">Black</option>
  12. <option value="C2">DarkCyan</option>
  13. <option value="C3" selected="selected" class="selected">DarkRed</option>
  14. <option value="C4">DarkMagenta</option>
  15. </select>
  16. <select size="5">
  17. <option value="C1">Black</option>
  18. <option value="C2">DarkCyan</option>
  19. <option value="C3" selected="selected">DarkRed</option>
  20. <option value="C4">DarkMagenta</option>
  21. </select>
  22. <input type="text" />
  23. </div>
  24. </body>
  25. </html>

其中 Main.css 如下所示：

Html代码  

  1. option.selected {
  2. color: White;
  3. Cyan;
  4. }

其他改变样式，使用CSS改变文字颜色

Html代码  

  1. 用 CSS 定义文字颜色如下代码所示：
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  6. <style type="text/css"> select { color:red  } </style>
  7. <title>Test</title>
  8. </head>
  9. <body>
  10. <div>
  11. <select size="5" disabled="disabled">
  12. <option value="C1">Black</option>
  13. <option value="C2">DarkCyan</option>
  14. <option value="C3" selected="selected">DarkRed</option>
  15. <option value="C4">DarkMagenta</option>
  16. </select>
  17. <select size="5">
  18. <option value="C1">Black</option>
  19. <option value="C2">DarkCyan</option>
  20. <option value="C3" selected="selected">DarkRed</option>
  21. <option value="C4">DarkMagenta</option>
  22. </select>
  23. <input type="text" />
  24. </div>
  25. </body>
  26. </html>

5、使用隐藏域，在select下面设置隐藏域，显示的时候disabled,提交的时候提交隐藏域中的值。

Html代码  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4. <select id="selList" onchange="setVal()">
  5. <option value="1" >1</option>
  6. <option value="2" selected="selected">2</option>
  7. </select>
  8. <input id="hdSelList" type="text" />
  9. <script type="text/javascript">
  10. //本demo是为了清晰地表达, 你在select中加入 disabled="disabled",
  11. //将input中的type改为hidden即为你要的效果了.
  12. //提交时, 你不要取selList的值, 取hdSelList的值就好了.
  13. setVal();  //1.在初始加载时就将两者的值设置为一致;
  14. //2. 为了防止代码以后会有改动---有时不需要disabled, 故有上面的onchange="setVal()"
  15. function setVal() {
  16. document.getElementById(‘hdSelList‘).value = document.getElementById(‘selList‘).value;
  17. }
  18. </script>
  19. </body>
  20. </html>

还有下面的一种情况，页面数据太多，处理时间较长

Html代码  

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script src="../ec/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  5. <script type="text/javascript" >
  6. function commit() {
  7. $DisSelects = $("select[disabled=‘disabled‘]");//获取所有被禁用的select
  8. $DisSelects.attr("disabled", false); //处理之前, 全部打开
  9. $("#form1").submit();                //提交
  10. $DisSelects.attr("disabled", true);  //处理完成, 全部禁用
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <form id="form1" action="HTMLPage.htm">
  16. <input type="button" value="submit" onclick="commit()" />
  17. <select id="Select1" disabled="disabled" >
  18. <option value="0" >0</option>
  19. <option value="1" selected="selected">1</option>
  20. </select>
  21. <select id="Select2" disabled="disabled" >
  22. <option value="1" >1</option>
  23. <option value="2" selected="selected">2</option>
  24. </select>
  25. <select id="Select3" disabled="disabled" >
  26. <option value="2" >2</option>
  27. <option value="3" selected="selected">3</option>
  28. </select>
  29. <select id="Select4"  disabled="disabled" >
  30. <option value="3" >3</option>
  31. <option value="4" selected="selected">4</option>
  32. </select>
  33. </form>
  34. </body>
  35. </html>
时间： 2024-08-11 01:21:10

html中select只读显示的相关文章

只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法

七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT FIRST N * FROM TABLENAME 3. DB2数据库 SELECT * FROM (SELECT * ROW_NUMBER() OVER({ORDER BY COL1 DESC}) AS ROWNUM FROM TABLENAME) WHERE ROWNUM <= N 或者 SELEC

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

MySQL数据中分级分组显示数据

前面已经有了SqlServer数据分级分组显示数据了.今天又来做一个MySQL数据库中的分级分组显示,SqlServer中用到了递归,这里为了简单就直接把根的数据显示为0 ,而不用递归了. 在MySQL数据库中创建数据表: CREATE TABLE `categories` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '分类id' , `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_gene

QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据

QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://qt-project.org/wiki/How_to_use_a_QSqlQueryModel_in_QML 环境: 主机:WIN7 开发环境:Qt5.2.1 说明: 在QML中不能直接对数据库进行操作,所以将QSqlQueryModel封装成子类,作为属性给QML使用 效果图: 源代码: qml文

查询语句中select from where group by having order by的执行顺序

查询语句中select from where group by having order by的执行顺序 1.查询中用到的关键词主要包含六个,并且他们的顺序依次为 select--from--where--group by--having--order by 其中select和from是必须的,其他关键词是可选的,这六个关键词的执行顺序 与sql语句的书写顺序并不是一样的,而是按照下面的顺序来执行 from--where--group by--having--select--order by,

vs 2012 调试不了js -- solution 中script document显示不出来

背景: 因为项目的需要,从ie8升级到ie11(并且自动更新安装了几个ie11的补丁),升级后想用vs2012 调试asp.net项目中的js 但是发现solution中script document项目没有在项目中运行时启动,js不能打断点(***的空心圈). 解决过程: 这个同组的同事以前遇到过,并且解决了,所以向他请教,无果,不知道怎么解决的... 搜索了一下不能打断点的提示信息,网上给的说法是高级设置ie中禁掉第三方的调试工具选项前面的勾去掉,无果:这个和我的问题没有关系. 之前有同事更

sqlserver中select造成死锁

项目上线,准备验收前出现了一个严重的问题:很多select语句作为死锁的牺牲,大部分报表无法打开.这个问题影响范围很大所有的报表都无法访问,而我们的报表是放在电视上面轮播的,电视放在工厂里面,所以出现问题后,整个工厂都知道了. 解决这个问题比较曲折,首先是写SAP接口的同事发现了问题:SAP一直在传错误数据导致产量表被锁住.修改SAP传输的错误数据后,这个死锁的问题没有出现了.但是我查看生产环境服务器日志的时候,发现这个问题依然存在,由于客户没有提这个问题,我也就是没有理由要求花时间修改了,因为

解决Eclipse中C++代码显示Symbol &amp;#39;std&amp;#39; could not be resolved的问题

第一次在Eclipse中写C++代码,写了一个简单的hello world程序,还没有等我编译.就报出了各种错误,但是这么简单的代码.怎么可能这么多错误.于是没有理会.编译执行后,能够正常输出!!!Hello World!!!,但是我的代码中还是有非常多红叉,把鼠标放在上面显示:Symbol 'std' could not be resolved 这种信息. 于是问题来了.怎样解决? 方法:写完库函数以后立刻保存.这样写之后的代码就不会报错了 比如:-->首先写#include <iostre

[iTyran原创]iPhone中OpenGL ES显示3DS MAX模型之一：OBJ格式分析

[iTyran原创]iPhone中OpenGL ES显示3DS MAX模型之一:OBJ文件格式分析作者:yuezang - iTyran 在iOS的3D开发中常常需要导入通过3DS MAX之类的3D设计软件生成的模型.因为OpenGL ES是不能直接读取这些文件的,所以常常需要开发人员增加接口来导入.通常的做法是在建模软件中建立3D模型之后在OpenGL ES中导入并进行控制.    3DS MAX通常的保存格式有*.max(现在生成的版本的格式),*.3ds(低版本的3ds Max生成的格式)