碼上快樂

相關內容    簡體    繁體

html中select只讀顯示

本文轉載自   查看原文   2016-08-30 17:40   20603 

因為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>  

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Html中各種空格的顯示 select標簽中怎樣控制option的顯示數量 HTML中讓表單input等文本框為只讀不可編輯的方法 如何設置select只讀不可編輯且select的值可傳遞 android 在HTML中顯示bitmap html中的下拉框—select和input方式 HTML中的標簽如何設置默認選中的選項 html中select標簽根據枚舉獲得值的總結 PHP：使用php，循環html中的select標簽與Php數據
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM