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

Question

我在这里附加了JS小提琴链接：

http://jsfiddle.net/p0b4j5o8/18/

如果检查小提琴链接，您将看到我在HTML部分中编写了JavaScript / jQuery代码（名为add_mitigator()的函数）。

当我以前在JavaScript部分中编写代码时， function add_mitigator() isn't defined用于触发错误说明function add_mitigator() isn't defined Firebug。 但是，当我在HTML部分中编写相同的代码时，它可以正常运行。 我对JS Fiddle不太习惯。 如何在小提琴中以function_name()格式编写函数？

在我的JS小提琴中，有一个下拉菜单（选择多个），选项1到10。当我单击add_mitigator链接时，它将创建/追加一个新选择的下拉菜单。

假设我有三个下拉菜单，那么如果我2 from dropdown 1选择2 from dropdown 1 ，那么其他下拉菜单将从其选项中删除2个。 当我从第一个下拉列表中取消选择2个时，其他两个下拉列表中将再次提供2个。 反之亦然。 如果从任何下拉菜单中选择2，则该菜单不适用于所有其他下拉菜单。

我该如何实现？

Answer 1

通过在选择框更改事件上调用以下功能，将根据您的要求禁用/启用这些选项。

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(); 。 然后，在.chosen().change()事件中，您需要告诉所有选择框在值更改后进行更新。 通过使用.trigger("chosen:updated"); 只要触发更改事件，选择框选择器上的选择框就会更新。

注意 ，每当添加一个选择框以使其在创建时被禁用时，都将需要调用disableSelectedValues()函数。

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