当我单击“添加新字段”时,我有一个按钮,它将填充一个新选择:
所有下拉列表创建的类都是“staff_list”且 name="staff_id[]" 创建的下拉列表元素的最大限制为 5,并且允许用户删除创建的下拉列表。 .
问题:如何禁用在另一个下拉列表中选择的下拉值?
例如,如果我在第一个下拉列表中选择值 A,则所有创建的值为 A 的下拉选项都会被禁用。
如果第二个下拉列表选择的值为 C。包含 C 的所有其他选项也被禁用
但是如果用户删除选择了值 A 的下拉列表。
选项值在其他下拉列表中可用的更改。
我该如何解决这个问题?
下面是我的示例代码:
var add_button = $(".add_sign");
var wrapper = $(".sign");
var max_fields = 6;
var x = 1;
$(add_button).click(function(e) {
if (x < max_fields) {
x++;
$(wrapper).append('<div class="input-group sign_user"><select class="staff_list" name="staff_id"><option value="">--Select staff--</option><option value="a">A</option><option value="b">B</option><option value="c">C</option></select><span class="input-group-btn delete_sign"><a href="#" class="btn btn-sm btn-danger">X</a></span></div>');
} else {
alert('Maximum 5 Authorised Signatory only!');
}
});
//Delete staff_list
$(wrapper).on("click", ".delete_sign", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign">
<button class="add_sign">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span> </button>
</div>
最佳答案
我会创建一个函数来检查每个选定的值,然后启用所有 option
s,搜索.staff_list
为option
s 在当前未选择的数组中,并禁用它们。
将该函数作为监听器添加到 wrapper
(使用事件委托(delegate))并在更多之后运行它 <select>
附加 s(以确保新选项的值被正确禁用),并在 <select>
之后运行它。被删除(这样,如果 <select>
选择了任何内容,则现在在其他元素中再次启用其值)。
这确保了禁用 option
的正确重新计算每当有变化时都会出现。
请注意,由于当前只有 3 个可能的值( a
、 b
和 c
),因此只有三个 select
当前可以更改 - 之后,每个可能的选项(默认值除外)都将被禁用。
var add_button = $(".add_sign");
var wrapper = $(".sign");
var max_fields = 6;
var x = 1;
add_button.click(function(e) {
if (x < max_fields) {
x++;
wrapper.append('<div class="input-group sign_user"><select class="staff_list" name="staff_id"><option value="">--Select staff--</option><option value="a">A</option><option value="b">B</option><option value="c">C</option></select><span class="input-group-btn delete_sign"><a href="#" class="btn btn-sm btn-danger">X</a></span></div>');
recalcDisabled();
} else {
alert('Maximum 5 Authorised Signatory only!');
}
});
//Delete staff_list
$(wrapper).on("click", ".delete_sign", function(e) {
e.preventDefault();
$(this).parent('div').remove();
recalcDisabled();
x--;
});
wrapper.on('change', 'select', recalcDisabled);
function recalcDisabled() {
const selectedValues = $('.staff_list')
.map((_, sel) => sel.value)
.get()
.filter(Boolean); // Filter out the empty string
$('.staff_list option').prop('disabled', false);
selectedValues.forEach(value => {
$(`.staff_list[value!="${value}"] option[value="${value}"]`)
.prop('disabled', true);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign">
<button class="add_sign">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span> </button>
</div>
关于javascript - 在更改另一个动态下拉列表时禁用动态下拉选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51738465/