如何设置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="width: 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="width: 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下拉框设置,这样才显示被禁止操作

posted @ 2020-07-14 10:08  阿波罗任先生  阅读(15905)  评论(0编辑  收藏  举报