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

using jquery how do I filter a dropdown field based on value selected from another dropdown field

提问by user1176783

I am just missing something.

我只是错过了一些东西。

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

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

So for example if Royis selected from the Workersdropdown, I only want Apples and Peaches to appear as options within the Fruit OptionsDropdown If Johnis selected from the Workersdropdown, then only Oranges, Pears, Peaches, Nuts to appear as options within the Fruit OptionsDropdown.

因此，举例来说，如果罗伊从所选工人下拉菜单中，我只希望苹果和桃子出现作为内选择水果选项下拉如果约翰从所选工人下拉列表，然后只橙子，梨，桃，坚果显示为内选择在水果选项下拉。

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

我如何正确使用 jquery，根据 Worker 下拉列表的选择过滤 Fruit Options 下拉菜单？

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

我的 jfiddle 在这里：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>

回答by Selvakumar Arumugam

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 onchangehandler 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();).

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

Now using the workerandFruitsvar you can determine the fruits that the selected worker prefer and populate the Select2based on that.

现在使用workerandFruitsvar 您可以确定所选工人喜欢的水果并Select2根据它填充。

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

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

回答by Learner

Do something like this:

做这样的事情：

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

http://jsfiddle.net/xRTAk/

回答by cssyphus

Using AJAX is a great way to do what you are asking.

使用 AJAX 是完成您所要求的工作的好方法。

Please forgive me if you already know this but in jQuery/javascript, you:

如果您已经知道这一点，请原谅我，但是在 jQuery/javascript 中，您：

• grab the value of the first select box

• use AJAX code to send that to a secondary PHP file, which uses the data it receives to write some HTML code based on what the user chose

• the newly constructed HTML is ECHOed back to the ajax routine, where it is received inside a successfunction

• Inside the successfunction, you can use jQuery to replace the contents of the second dropdown

• 获取第一个选择框的值

• 使用 AJAX 代码将其发送到辅助 PHP 文件，该文件使用收到的数据根据​​用户选择编写一些 HTML 代码

• 新构造的 HTML 被回显到 ajax 例程，在那里它被接收到一个success函数中

• 在success函数内部，可以使用jQuery替换第二个下拉列表的内容

Here is a detailed example, with explanations

这是一个详细的例子，有解释