如何设置select下拉禁止选择

如何设置select下拉禁止选择

1、问题背景

设置select下拉框不能选择,利用disabled="disabled",但是颜色且显示白色,容易引起用户误解

2、问题实现

(1)只禁止

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>如何设置select下拉禁止选择</title>
  6.  
    <script src="../js/jquery-1.12.4.js"></script>
  7.  
    <script>
  8.  
    $(function(){
  9.  
     
  10.  
    });
  11.  
    </script>
  12.  
    </head>
  13.  
    <body>
  14.  
    <select id="sel" style=" 200px; " disabled="disabled">
  15.  
    <option value="1">项目经理</option>
  16.  
    <option value="2">总经理</option>
  17.  
    <option value="3">技术经理</option>
  18.  
    <option value="4">部门经理</option>
  19.  
    </select>
  20.  
    </body>
  21.  
    </html>

(2)禁止且颜色为灰色

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>如何设置select下拉禁止选择</title>
  6.  
    <script src="../js/jquery-1.12.4.js"></script>
  7.  
    <script>
  8.  
    $(function(){
  9.  
     
  10.  
    });
  11.  
    </script>
  12.  
    </head>
  13.  
    <body>
  14.  
    <select id="sel" style=" 200px; " disabled="disabled">
  15.  
    <option value="1">项目经理</option>
  16.  
    <option value="2">总经理</option>
  17.  
    <option value="3">技术经理</option>
  18.  
    <option value="4">部门经理</option>
  19.  
    </select>
  20.  
    </body>
  21.  
    </html>

3、问题说明

利用disabled="disabled"和background-color进行对select下拉框设置,这样才显示被禁止操作

原文地址:https://www.cnblogs.com/apolloren/p/13297541.html