javascript - 在其他下拉菜单中选择后禁用下拉选项

Question

我有 12 个下拉输入区域，其中 1 个对应一年中的每个月份。每个下拉菜单都有相同的 24 个选项。

我需要这样做，例如，如果您在“一月”下拉框中选择了选项 #4，则无法在任何其他下拉菜单中选择该选项 #4。它仍然在下拉列表中，但只是被禁用。

这将有一个 ajax 触发器来检查其他下拉菜单的值并动态更改其他下拉菜单。

是否有一个循环可以动态检查和禁用这些值，而无需创建大量 if 语句？

Answer 1

您可以使用 jQuery 在所有其他下拉列表中查找 option 元素(在我的示例中，由某个 class 指定......并且可以轻松更改为另一个选择器 - 我认为选择器 "select" 太宽泛)，然后使用 .prop("disabled", true)< 禁用实际的 option 元素。但这比这更棘手，因为您需要跟踪以前选择的值，以便在选择不同的值时再次启用下拉列表。这是一个希望有所帮助的示例:

http://jsfiddle.net/p5Arj/

$(document).ready(function () {
    $(".test").each(function () {
        var $self = $(this);
        $self.data("previous_value", $self.val());
    });

    $(".test").on("change", function () {
        var $self = $(this);
        var prev_value = $self.data("previous_value");
        var cur_value = $self.val();

        $(".test").not($self).find("option").filter(function () {
            return $(this).val() == prev_value;
        }).prop("disabled", false);

        if (cur_value != "") {
            $(".test").not($self).find("option").filter(function () {
                return $(this).val() == cur_value;
            }).prop("disabled", true);

            $self.data("previous_value", cur_value);
        }
    });
});

因此，当您选择一个下拉菜单时，这会禁用所有其他下拉菜单的相同选项，并确保当您选择另一个下拉菜单时，前一个选项会在所有其他下拉菜单中启用。例如，在第一个下拉列表中选择“3”...查看第二个下拉列表 - 看到“3”已禁用...返回第一个下拉列表并选择“1”...查看第二个下拉列表 -看到“3”再次启用，但“1”被禁用。这就是我的代码中使用 .data 的用途。

当然，如果您 100% 确定所有 options 都将是，则可以将 value 的使用替换为 selectedIndex对于每个有问题的选择都是一样的。