在特定下拉列表中选择时，从所有其他选定的多个下拉列表中删除一个选项

Question

我在这里附上了一个JS Fiddle link:

如果你查看 fiddle link，你会看到我在 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 link 时，它 creates/appends新选择的下拉菜单。

假设我有三个下拉菜单，然后如果我 select 2 from dropdown 1，那么其他下拉菜单将从他们的选项中删除 2 个。当我从第一个下拉列表中取消 select 2 时，其他两个下拉列表中将再次提供 2。这应该反之亦然。当 2 从任何下拉菜单中 select 编辑时，它对所有其他下拉菜单不可用。

我怎样才能做到这一点？

Answer 1

通过在 select 框更改事件上调用下面的函数，选项将根据您的要求 disabled/enabled。

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() 事件中，您需要告诉所有 select 框在值更改后更新。通过在 select 框 select 上使用 .trigger("chosen:updated"); 或者每当更改事件被触发时， select 框将更新。

注意无论何时添加 select 框以在创建时禁用其选项，都需要调用 disableSelectedValues() 函数。

http://jsfiddle.net/p0b4j5o8/22/

在特定下拉列表中选择时，从所有其他选定的多个下拉列表中删除一个选项

Removing an option from all other chosen multiple dropdowns, when selected on a particular dropdown

javascript

jquery

jquery-chosen

drop-down-menu