如何使用jquery根据从另一个下拉字段中选择的值筛选下拉字段
如何使用jquery根据从另一个下拉字段中选择的值筛选下拉字段
提问于 2013-06-07 19:53:54
我只是遗漏了一些东西。
非常简单，我认为--使用jquery --基于Worker下拉列表中选择的值，我只想在果树选项下拉列表中显示某些值。
因此，例如，如果Roy是从Worker下拉列表中选择的，那么如果从WorkerE 213下拉列表中选择John，则只希望Apple和桃作为选项出现在果树选项下拉列表中，然后只有Orange、Pears、桃、坚果作为E 114果树选项E 215下拉列表中的选项出现。
如何正确地使用jquery根据员工下拉列表的选择筛选果树选项下拉列表？
我的小提琴在这里：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>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-07 20:10:26
您需要一个数据结构来映射工人和水果之间的关系。就像下面这样，
var workerandFruits = {
Roy: ["Apples", "Peaches"],
John: ["Oranges", "Pears", "Peaches", "Nut"]
}然后，您需要为onchange编写一个$('select[name=Select1')处理程序，其中需要根据Select1 ($(this).find('option:selected').text();)中选定的选项文本过滤$('select[name=Select2])选项。
现在，使用workerandFruits变量，您可以确定所选工作人员喜欢的结果，并在此基础上填充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/
Stack Overflow用户
发布于 2013-06-07 20:02:00
使用AJAX是一种很好的方式来满足您的要求。
如果您已经知道这一点，请原谅我，但是在jQuery/javascript中，您：
- 获取第一个复选框的值
- 使用AJAX代码将其发送到一个次要PHP文件，该文件根据用户选择的内容使用接收到的数据编写一些HTML代码
- 新构造的ECHOed返回到ajax例程，在该例程中接收到
success函数。 - 在
success函数中，可以使用jQuery替换第二个下拉列表的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16991960
复制相关文章
相似问题
腾讯云开发者
