html中select只读显示

Posted 疯子加天才

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
  7.   <style type="text/css"> select { color:red  } </style>  
  8.   <title>Test</title>  
  9. </head>  
  10. <body>  
  11.   <div>  
  12.     <select size="5" disabled="disabled">  
  13.       <option value="C1">Black</option>  
  14.       <option value="C2">DarkCyan</option>  
  15.       <option value="C3" selected="selected">DarkRed</option>  
  16.       <option value="C4">DarkMagenta</option>  
  17.     </select>  
  18.     <select size="5">  
  19.       <option value="C1">Black</option>  
  20.       <option value="C2">DarkCyan</option>  
  21.       <option value="C3" selected="selected">DarkRed</option>  
  22.       <option value="C4">DarkMagenta</option>  
  23.     </select>  
  24.     <input type="text" />  
  25.   </div>  
  26. </body>  
  27. </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>  

 

以上是关于html中select只读显示的主要内容，如果未能解决你的问题，请参考以下文章

HTML 表单只读 SELECT 标记/输入

HTML 表单只读 SELECT 标记/输入

如何实现表单里的select值与input关联？

javascript如何设置select只读不可用？

SQL Select 语句的用法

怎么将checkbox，radio，select控件设置为只读，不可选