jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用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;
    }));
});

演示:http://jsfiddle.net/tKU26/

大佬总结

以上是大佬教程为你收集整理的使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段全部内容,希望文章能够帮你解决使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。