如何设置select下拉禁止选择

最新推荐文章于 2024-06-17 11:23:01 发布

梦想能成真吗

最新推荐文章于 2024-06-17 11:23:01 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_43678480/article/details/86414853

版权

如何设置select下拉禁止选择

1、问题背景

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

2、问题实现

（1）只禁止

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>如何设置select下拉禁止选择</title>  <script src="../js/jquery-1.12.4.js"></script>  <script>   $(function(){       });  </script> </head> <body>  <select id="sel" style="width: 200px; " disabled="disabled">   <option value="1">项目经理</option>   <option value="2">总经理</option>   <option value="3">技术经理</option>   <option value="4">部门经理</option>  </select> </body></html>

（2）禁止且颜色为灰色

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>如何设置select下拉禁止选择</title>  <script src="../js/jquery-1.12.4.js"></script>  <script>   $(function(){       });  </script> </head> <body>  <select id="sel" style="width: 200px; background-color: #EEEEEE;" disabled="disabled">   <option value="1">项目经理</option>   <option value="2">总经理</option>   <option value="3">技术经理</option>   <option value="4">部门经理</option>  </select> </body></html>