提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

如何设置select下拉禁止选择

如何 设置 选择 SELECT 禁止 下拉
2023-09-14 08:59:25 时间

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

相关文章