jQuery禁止并灰显下拉选项
程序员文章站
2022-07-08 09:34:27
...
jQuery禁止并灰显下拉选项，是通过给option加disabled="true"属性控制的，如下示例所示：
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name:
<input class="field" type="text" />
<p>
Car:<select class="field" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" disabled="true">Fiat</option>
<option value="audi" disabled="true">Audi</option>
</select>
</p>
</body>
</html>
运行效果：
如要通过JS控制某个option禁止并灰显，最简单的方法是给option加id，然后通过$("#fiat").attr("disabled","disabled");或$("#fiat").attr("disabled",true);实现，如下示例所示：
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
$("#fiat").attr("disabled","disabled");
$("#audi").attr("disabled",true);
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name:
<input class="field" type="text" />
<p>
Car:<select class="field" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" disabled="true">Fiat</option>
<option value="audi" disabled="true">Audi</option>
</select>
</p>
<p>
Car2:<select class="field" name="cars2" id="cars2">
<option value="volvo" id="volvo">Volvo</option>
<option value="saab" id="saab">Saab</option>
<option value="fiat" id="fiat">Fiat</option>
<option value="audi" id="audi">Audi</option>
</select>
</p>
</body>
</html>
运行效果：
当然，如果不给option加id，也可以通如下方法来获取option，并进行控制。
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
var options = $("#cars3").find("option");
var count = options.length;
for(var i=0; i<count; i++) {
if($(options[i]).text() !== "请选择") {
$(options[i]).attr("disabled", true);
}
//如下写法也OK
/*
if(options[i].text !== '请选择') {
options[i].disabled = true;
}
*/
}
/*如下写法也OK，另一种控制方法
var count2=$("#cars3 option").length;
for(var i=0;i<count2;i++) {
if($("#cars3").get(0).options[i].text !== "请选择") {
$("#cars3").get(0).options[i].disabled = true;
}
}
*/
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name:
<input class="field" type="text" />
<p>
Car3:<select class="field" name="cars3" id="cars3">
<option>请选择</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>
运行效果：
上一篇： 关于回车直接执行事件的方法
下一篇： Swing输入框添加回车监控事件
推荐阅读