Question

我只是遗漏了一些东西。

我认为非常简单 - 使用jquery - 根据 Workers 下拉列表中选择的值，我想在 Fruit Options 下拉列表中仅显示某些值。

例如，如果从工作人员下拉菜单中选择 Roy ，我只希望苹果和桃子在水果选项中显示为选项落下如果从工作人员下拉菜单中选择约翰，则只有橙子，梨子，桃子，坚果在水果选项下拉列表中显示为选项。< / 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>

Answer 1

您需要一个数据结构来映射工人和水果之间的关系。如下所示，

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

然后您需要为onchange编写一个$('select[name=Select1')处理程序，您需要根据$('select[name=Select2])中的所选选项文本过滤Select1个选项（{{1} }}）。

现在使用$(this).find('option:selected').text(); var，您可以确定所选工作人员喜欢的成果，并根据该成果填充workerandFruits。

Select2

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

Answer 2

做这样的事情：

<select id="worker"></select>
<select id="fruits"></select>

var data = [ // The data
    ['Roy', [
        'Apples','Peaches'
    ]],
    ['John', [
        'Oranges', 'Pears', 'Peaches', 'Nuts'
    ]]
];

$a = $('#worker'); // The dropdowns
$b = $('#fruits');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice

http://jsfiddle.net/xRTAk/

Answer 3

使用AJAX是一种很好的方式来做你想要的。

请原谅我，如果你已经知道这个，但在jQuery / javascript中，你：

抓住第一个选择框的值
使用AJAX代码将其发送到辅助PHP文件，该文件使用收到的数据根据用户选择的内容编写一些HTML代码
新构建的HTML被ECHOed回到ajax例程，在success函数
在success函数中，您可以使用jQuery替换第二个下拉列表的内容

Here is a detailed example，附带说明

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

3 个答案: