gpt4 book ai didi

javascript - 在其他下拉列表中选择后禁用下拉选项

转载 作者:太空宇宙 更新时间:2023-11-04 15:17:48 25 4
gpt4 key购买 nike

我有 12 个下拉输入区域,一年中的每个月各有一个。每个下拉菜单都有相同的 24 个选项可供选择。

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

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

是否有一个循环可以动态地检查和禁用这些值,而无需进行大量 if 语句?

最佳答案

您可以使用 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 都将是对于每个有问题的 select 都是一样的。

关于javascript - 在其他下拉列表中选择后禁用下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13149228/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com