我在此处附加了 JS Fiddle 链接:
http://jsfiddle.net/p0b4j5o8/18/
如果您检查 fiddle 链接,您将看到我在 HTML 部分编写了 JavaScript/jQuery 代码(名为 add_mitigator()
的函数)。
当我在 JavaScript 部分编写代码时,Firebug 常常触发一个错误,指出 function add_mitigator() isn't Defined
。
但是当我在 HTML 部分编写相同的内容时,它运行没有问题。我不太习惯 JS Fiddle。如何在 fiddle 中编写 function_name()
格式的函数?
在我的 JS Fiddle 中,有一个下拉列表(选择多个),其中包含选项 1 到 10。当我单击 add_mitigator
链接时,它会创建/附加一个新选择的下拉列表。
假设我有三个下拉菜单,那么如果我从下拉菜单 1 中选择 2
,那么其他下拉菜单将从其选项中删除 2 个。当我从第一个下拉列表中取消选择 2 时,其他两个下拉列表中将再次提供 2。反之亦然。当从任何下拉列表中选择 2 时,它对于所有其他下拉列表均不可用。
我怎样才能实现这个目标?
最佳答案
通过在选择框更改事件上调用以下函数,选项将根据您的要求禁用/启用。
function disableSelectedValues() {
var cssOptions = [];
$(".input_field.criteria_countries option").removeAttr("disabled");
$.each($(".input_field.criteria_countries"), function(index, select) {
cssOptions = [];
var values = $(select).val();
if (values) {
for (var i = 0; i < values.length; i++) {
cssOptions.push("option[value=" + values[i] + "]");
}
}
console.log("test");
if (cssOptions.length) {
// disable all options with the selected values
$(".input_field.criteria_countries "
+ cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);
// enable all options with the selected values for the current select
$(select).find(cssOptions.join()).removeAttr("disabled");
}
});
}
使用.chosen
,您可以使用.chosen().change();
监听onchange事件。
在 .chosen().change()
事件中,您需要告诉所有选择框在值更改后进行更新。每当触发更改事件时,通过在选择框选择器上使用 .trigger("chosen:updated");
,选择框将会更新。
注意,每当您添加选择框以在创建时禁用其选项时,您都需要调用 disableSelectedValues()
函数。
关于javascript - 在特定下拉列表中选择时,从所有其他选定的多个下拉列表中删除选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30475702/