使用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/