使用jquery如何根据从另一个下拉字段中选择的值过滤下拉字段

Question

我只是遗漏了一些东西.

很简单或者我认为 - 使用jquery - 根据Workers下拉列表中选择的值,我想在Fruit Options下拉列表中仅显示某些值.

因此,例如,如果从工作人员下拉菜单中选择罗伊,我只希望苹果和桃子作为水果选项下拉菜单中的选项出现如果从工作人员下拉菜单中选择约翰,那么只有橙子,梨,桃子,坚果作为选项出现在在水果选项下拉.

我如何使用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>

Answer 1

您需要一个数据结构来映射工作者和水果之间的关系.像下面的东西,

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

然后,您需要onchange为$('select[name=Select1')内部编写一个处理程序,您需要$('select[name=Select2])根据Select1($(this).find('option:selected').text();)中选定的选项文本过滤选项.

现在使用workerandFruitsvar,您可以确定所选工作人员喜欢的水果,并根据该水果填充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/