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

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

  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文件，这种方法的不足之处和第一种一样。

  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方式解决。

  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。

补救办法：

  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 如下所示：

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

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

  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,提交的时候提交隐藏域中的值。

  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>

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

  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>

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

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

    七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...

  2. 七种数据库中Select Top的使用方法 （只显示数据库的几条记录）

    七种数据库中Select Top的使用方法 1. Oracle数据库  SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库  SELE ...

  3. SQL Server中SELECT会真的阻塞SELECT吗？

    在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...

  4. 项目实例——多表关联查询判断A的字段是否在B中，在显示该字段值，不在显示空；B的字段是否在C中，在显示该字段值，不在显示空。

    1.需求: (1)三张表A.B.C  三个表id相同,如果A表中的name在B表中的bname中显示aname值,否则显示空:如果C表中的addr在B表中的tel显示addr,否则显示空 2.实现方式 ...

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

    查询语句中select from where group by having order by的执行顺序   1.查询中用到的关键词主要包含六个,并且他们的顺序依次为  select--from--w ...

  6. mysql进阶(四)mysql中select

    mysql中select * for update 注:  FOR UPDATE 仅适用于InnoDB,且必须在事务区块(BEGIN/COMMIT)中才能生效. 作用 锁定该语句所选择到的对象.防止在 ...

  7. springboot中使用mybatis显示执行sql

    springboot 中使用mybatis显示执行sql的配置,在properties中添加如下 logging.你的包名=debug 2018-11-27 16:35:43.044 [DubboSe ...

  8. SQLite中SELECT基本形式

    SQLite中SELECT基本形式 每个数据库通常都包含多个表,而每个表又包含多条数据.要获取数据库中的数据,就需要SQL语言提供的查询语句SELECT.本章将讲解和SELECT语句相关的内容,其中包 ...

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

    QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 參考链接: http:// ...

随机推荐

  1. Swift3.0语言教程组合字符串

    Swift3.0语言教程组合字符串 Swift3.0语言教程组合字符串,当开发者想要将已经存在的字符串进行组合,形成一个新的字符串,可以使用NSString中的两个方法,分别为appending(_: ...

  2. 块级元素和内联元素的区别（HTML）

    请把下面二行代码放进body标签里:     <div style=”border: 1px solid red;”>div1</div>     <div style= ...

  3. underscore.js依赖库函数分析二（查找）

    查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素 ...

  4. .net平台下垃圾回收机制

    引言:使用c++进行编程,内存的处理绝对是让每个程序设计者最头疼的一块了.但是对于.net平台下使用c#语言开发系统,内存管理可以说已经不算是问题了.在.net平台下CLR负责管理内存,CLR中的垃圾 ...

  5. uva10106（大数乘法）

    public class Product { public static void main(String[] args){ Scanner sc = new Scanner(new Buffered ...

  6. iOS学习05C语言函数

    本次主要是学习和理解函数,函数树状图如下: 1.函数的声明和定义 函数定义的四要素分别为: 返回值类型 :函数的结果值类型,函数不能返回数组. 指定返回类型是void类型说明函数没有返回值. 函数名 ...

  7. BZOJ4360 : achievement

    对于$mode=0$的情况: 假设已经知道了最终要做哪些成就,那么这些成就一定是按$b$递减做的. 将成就按$b$从大到小排序,考虑往已选集合里新加一个成就. 假设该成就前面有$t$个已选成就,后面成 ...

  8. 20145308刘昊阳 《Java程序设计》实验一 Java开发环境的熟悉 实验报告

    20145308刘昊阳 <Java程序设计>实验一报告 实验名称 Java开发环境的熟悉 实验内容 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试J ...

  9. BZOJ 1045 题解

    1045: [HAOI2008] 糖果传递 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3502  Solved: 1623[Submit][Sta ...

  10. 【BZOJ】3052: [wc2013]糖果公园

    http://www.lydsy.com/JudgeOnline/problem.php?id=3052 题意:n个带颜色的点(m种),q次询问,每次询问x到y的路径上sum{w[次数]*v[颜色]} ...