3

我只是错过了一些东西。

我认为非常简单 - 使用 jquery - 基于工人下拉列表中选择的值，我只想在水果选项下拉列表中显示某些值。

例如，如果从Workers下拉列表中选择Roy，我只希望 Apples 和 Peaches 显示为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>
4

3 回答 3

5

您需要一个数据结构来映射工人和水果之间的关系。像下面这样的东西，

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/

于 2013-06-07T20:10:26.510 回答
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/

于 2013-06-07T20:10:18.100 回答
0

使用 AJAX 是完成您所要求的事情的好方法。

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

  • 抓取第一个选择框的值

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

  • 新构建的 HTML 回显到 ajax 例程，在success函数内部接收它

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

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

于 2013-06-07T20:02:00.330 回答