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>
运行效果:
相关推荐
今天小编就为大家分享一篇Layui 动态禁止select下拉的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ==============...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏)3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换)4.分享功能(采用百度分享接口,整合到...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单,后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能(采用百度分享接口,...
12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景...
12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景...