zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    JavaSE 基础 第51节 定义自己的异常
    JavaSE 基础 第50节 Java中的异常链
    JavaSE 基础 第49节 手动抛出异常
    JavaSE 基础 第48节 Java中的异常声明
    JavaSE 基础 第47节 获取异常信息
    JavaSE 基础 第46节 异常的分类
    JavaSE 基础 第45节Java异常快速入门
    JavaSE 基础 第44节 引用外部类的对象
    JavaSE 基础 第43节 静态内部类
    通用爬虫
  • 原文地址：https://www.cnblogs.com/telwanggs/p/5822926.html
Copyright © 2011-2022 走看看