jquery 中怎么让下拉框不能选择
使用jquery动态的设置下拉框不能选择可以使用jquery的attr方法给select控件添加disabled属性,由于即使是被禁止选择了,下拉框还是会显示白色,这样可能会让用户产生 误解,可以再加上一个灰色的背景色,具体实现代码如下:
HTML
<!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">
<option value="1">项目经理</option>
<option value="2">总经理</option>
<option value="3">技术经理</option>
<option value="4">部门经理</option>
</select>
</body>
</html>
JavaScript
$("#sel").attr("disabled","disabled").css("background-color","#EEEEEE;");
效果图:
1、下拉按钮控件变灰不可点,根本不能显示下拉列表中的选项
2、下拉按钮可以点,但是显示选项为灰色,点击无“选中”效果
例子代码如下:注意看代码的注释
(下面代码如果你想看显示效果,记得修改jquery.js的位置)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
//$("#aaa").attr("disabled",true); //这行十对应第一种情况
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars" id="aaa">
//下面这4行是对应第二种情况,靠disabled="true"来控制
<option value="volvo" disabled="true">Volvo</option>
<option value="saab" disabled="true">Saab</option>
<option value="fiat" disabled="true">Fiat</option>
<option value="audi" disabled="true">Audi</option>
</select>
</p>
</body>
</html>
不明白请追问,如果对你有帮助,记得采纳~
使用jquery动态的设置下拉框不能选择可以使用jquery的attr方法给select控件添加disabled属性,由于即使是被禁止选择了,下拉框还是会显示白色,这样可能会让用户产生 误解,可以再加上一个灰色的背景色,具体实现代码如下:
HTML
<!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">
<option value="1">项目经理</option>
<option value="2">总经理</option>
<option value="3">技术经理</option>
<option value="4">部门经理</option>
</select>
</body>
</html>JavaScript
$("#sel").attr("disabled","disabled").css("background-color","#EEEEEE;");
效果图:
$('select').prop({'disabled',true});