您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery效果 > 正文

jquery按关键词多选列表框选项特效

2014-04-09 09:04:23 作者:天外飞仙 人气:1051 Views

jquery按关键词多选列表框选项特效
jquery按关键词多选列表框选项特效
css js代码

<link href="style/reset.css" rel="stylesheet" type="text/css" media="all"/><link href="style/default.css" rel="stylesheet" type="text/css" media="screen"/><link href="style/styling.css" rel="stylesheet" type="text/css" media="screen"/><script type="text/javascript" src="javascript/jquery-1.3.1.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("input#none").click(function() { // make the element selectable again $("#colors").removeAttr("disabled"); // deselect all options $("#colors").each(function() { $("#colors option").removeAttr("selected"); }); }); // code for selecting all elements of a select form element with id=colors $("input#all").click(function() { $("#colors").each(function() { $("#colors option").attr("selected", "selected"); }); }); $("input#red").click(function() { // loop through each option in the selected element, remove the selected attribute $("#colors").each(function() { $("#colors option").removeAttr("selected"); }); // code for selecting all elements with id=colors that contain the value red, rinse and repeat as needed $("#colors option:contains('Red')").attr("selected", "selected"); // additionally disable the element so the user can't muck with it $("#colors").attr("disabled", "disabled"); }); // repeated for green $("input#green").click(function() { $("#colors").each(function() { $("#colors option").removeAttr("selected"); }); $("#colors option:contains('Green')").attr("selected", "selected"); $("#colors").attr("disabled", "disabled"); }); // repeated for blue $("input#blue").click(function() { $("#colors").each(function() { $("#colors option").removeAttr("selected"); }); $("#colors option:contains('Blue')").attr("selected", "selected"); $("#colors").attr("disabled", "disabled"); }); $("input#red-green").click(function() { $("#colors").each(function() { $("#colors option").removeAttr("selected"); }); // select multiple combinations - thanks for the idea Chad! $("#colors option:contains('Red'), #colors option:contains('Green')").attr("selected", "selected"); $("#colors").attr("disabled", "disabled"); }); });</script>

下载地址
预览地址

链接:http://www.jqueryba.com/3530.html(转载时请注明本文出处及文章链接)
分类:jQuery效果

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!