大佬教程收集整理的这篇文章主要介绍了使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
很简单或者我认为 – 使用jquery – 根据Workers下拉列表中选择的值,我想在Fruit Options下拉列表中仅显示某些值.
因此,例如,如果Roy从Workers下拉菜单中选择,我只希望苹果和桃子作为水果选项下拉列表中的选项出现
如果John从Workers下拉菜单中选择,则只有Oranges,Pears,Peaches,Nuts在Fruit Options下拉列表中显示为选项.
我如何使用jquery正确地根据Worker下拉列表的选择过滤Fruit Options下拉?
我的小伙子在这里:http://jsfiddle.net/justmelat/BApMM/1/
我的代码:
<form method="post"> Worker: <SELEct id="workers" name="SELEct1"> <option>Roy</option> <option>John</option> <option>Dave</option> </SELEct> </form> <br><br> <form method="post"> Fruit Options: <SELEct id="fruitopts" name="SELEct2"> <option>Apples</option> <option>Oranges</option> <option>Pears</option> <option>Peaches</option> <option>Grapes</option> <option>Melons</option> <option>Nut</option> <option>jelly</option> </SELEct></form>
var workerandFruits = { Roy: ["Apples","Peaches"],John: ["Oranges","Pears","Peaches","Nut"] }
然后你需要为$(‘SELEct [name = SELEct1’)编写一个onchange处理程序,你需要根据SELEct1中选择的选项文本过滤$(‘SELEct [name = SELEct2])选项($(this) ..find( ‘选项:选择了’)文本()).
现在使用workerandFruits var,您可以确定所选工作人员喜欢的成果,并根据该成果填充SELEct2.
$workers.change(function () { var $SELEctedWorker = $(this).find('option:SELEcted').text(); $fruits.html($fruitsList.filter(function () { return $.inArray($(this).text(),workerandFruits[$SELEctedWorker]) >= 0; })); });
以上是大佬教程为你收集整理的使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段全部内容,希望文章能够帮你解决使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。