一旦在其他下拉菜单中选择了禁用下拉选项 [英] Disable Drop Down Options Once Chosen In Other Dropdown

问题描述

我有12个下拉式输入区域，每年有1个月。每个下拉菜单都有相同的24个选项。

我需要这样做，例如，如果在1月的下拉框中选择了选项＃4，则不能在任何选项中选择该选项＃4其他下拉菜单。它仍然在下拉菜单中，但会被禁用。

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

是否有一个循环我可以做动态检查和禁用这些值而不必做大量的if语句？

您可以使用jQuery在所有其他下拉列表中找到选项元素（在我的示例中，由特定的 class ...并且可以很容易地更改为另一个选择器 - 我认为选择器select太宽泛了），然后禁用实际的通过使用 .prop（disabled，true）选项元素。但比这更棘手，因为您需要跟踪上一个选定的值，以便在选择不同的值时再次启用下拉菜单。以下是一个有望提供帮助的示例：

http：// jsfiddle .net / p5Arj /

  $（document）.ready（function（）{
 $（ .test）。each（function（）{
 var $ self = $（this）; 
 $ self.data（previous_value，$ self.val（））; 
 }）; 
 $ b $（。test）。on（change，function（）{
 var $ self = $（this）; 
 var prev_value = $ self.data（previous_value）; 
 var cur_value = $ self.val（）; 
 $ b $（。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 的原因。

当然，您可以使用 value with selectedIndex 如果您100％确定所有选项对于每个选择有问题。

I have 12 drop downs input areas, 1 for each of the months of the year. Each drop down has the choice of the same 24 options.

I need to make it so that, for example, if in the January drop down box you chose option #4, that option #4 cannot be selected in any of the other drop down menus. It would still be in the drop down, but would just be disabled.

This would have an ajax trigger to check the value against the other drop downs and dynamically change the other drop down menus.

Is there a loop I can do to check and disable these values dynamically without having to make a lot of if statements?

解决方案

You can use jQuery to find the option element in all other dropdowns (in my example, designated by a certain class...and can easily be changed to another selector - I thought the selector "select" was too broad), and then disable the actual option element by using .prop("disabled", true). But it's a little more tricky than this, as you need to keep track of the previous selected value to enable the dropdown again when a different value is chosen. Here's an example that will hopefully help:

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);
        }
    });
});

So this disables all other dropdowns' same options when you choose one, and makes sure that when you choose another, the previous one is enabled in all other dropdowns. For example, choose "3" in the first dropdown...look at the second dropdown - see that "3" is disabled...go back to the first dropdown and choose "1"...look at the second dropdown - see that "3" is enabled again but "1" is disabled. That's what the use of .data is for in my code.

Of course, you can replace the use of value with selectedIndex if you are 100% sure that all of the options will be the same for each select in question.

这篇关于一旦在其他下拉菜单中选择了禁用下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！