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>  
  • 相关阅读:
    VS2019基于windows类库创建单元测试报错解决方法
    scp 跨机远程拷贝
    java递归查询部门
    使用jOrgChart插件生成树形图
    让你页面上所有的非http请求强制转成https请求
    js对金额格式化————脑子不好使总忘
    去除相邻的重复元素 122345556 -> 123456
    打包时无法引入外部jar
    计算list里连续出现的值
    VirtualBox安装Centos双网卡(访问外网+固定IP)
  • 原文地址：https://www.cnblogs.com/telwanggs/p/5822926.html
Copyright © 2011-2022 走看看