使用jQuery，我如何基于从另一个下拉列表字段中选择的值过滤下拉列表字段 [英] using jquery how do I filter a dropdown field based on value selected from another dropdown field

问题描述

我只是想念一些东西.

非常简单，我想-使用jquery-基于 Workers 下拉菜单中选择的值，我只想在 Fruit Options 下拉列表中显示某些值.

例如，如果从工人下拉菜单中选择了 Roy ，我只希望苹果和桃子作为选项出现在水果选项中落下 如果从工人下拉列表中选择了 John ，则只有<桔子>梨，桃子，果仁和坚果显示为水果选项下拉列表中的选项. /p>

如何正确地使用jquery根据Worker下拉列表的选择过滤Fruit Options下拉列表?

我的jfiddle在这里: 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($(this).find('option:selected').text();)中选定的选项文本过滤$('select[name=Select2])选项.

现在使用workerandFruits变量，您可以确定所选工作人员喜欢的水果，并以此为基础填充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/

I am just missing something.

Very simple or so I thought - using jquery - Based on the value selected in the Workers dropdown, I want to display only certain values in the Fruit Options dropdown.

So for example if Roy is selected from the Workers dropdown, I only want Apples and Peaches to appear as options within the Fruit Options Dropdown If John is selected from the Workers dropdown, then only Oranges, Pears, Peaches, Nuts to appear as options within the Fruit Options Dropdown.

How do I correctly, using jquery, filter the Fruit Options drop based on the selection of the Worker dropdown?

My jfiddle is here: http://jsfiddle.net/justmelat/BApMM/1/

My Code:

 <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>

解决方案

You need a data structure to map the relationship between worker and the fruit. Something like below,

var workerandFruits = {
    Roy: ["Apples", "Peaches"],
    John: ["Oranges", "Pears", "Peaches", "Nut"]
}

Then you need to write an onchange handler for $('select[name=Select1') inside which you need to filter the $('select[name=Select2]) options based on the selected options text in Select1 ($(this).find('option:selected').text();).

Now using the workerandFruits var you can determine the fruits that the selected worker prefer and populate the Select2 based on that.

$workers.change(function () {
    var $selectedWorker = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function () {
         return $.inArray($(this).text(), workerandFruits[$selectedWorker]) >= 0;
    }));
});

DEMO: http://jsfiddle.net/tKU26/

这篇关于使用jQuery，我如何基于从另一个下拉列表字段中选择的值过滤下拉列表字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！