禁用动态下拉选项值 onchange 另一个动态下拉

Question

我有一个按钮，当我点击“添加新字段”时，它会填充一个新的 select :

创建的所有下拉列表 class 是“staff_list”和名称 =“staff_id[]” 创建的下拉列表元素的最大限制是 5，用户可以删除创建的下拉列表。 .

问题：如何禁用已在另一个下拉列表中 select 编辑的下拉值？

例如，如果我在第一个下拉列表中选择值 A，则所有创建的值为 A 的下拉选项都将被禁用。
如果第二个下拉selected值为C。所有其他包含C的选项也为disable
但是如果用户删除了值为 A 的下拉菜单 selected.
选项值更改为在其他下拉列表中可用。

我该如何解决这个问题？

下面是我的示例代码：

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 &nbsp; 
    <span style="font-size:16px; font-weight:bold;">+ </span>   </button>
</div>

Answer 1

我会创建一个函数来检查每个选定的值，然后启用所有 options，在 .staff_lists 中搜索 options s当前未选择的数组，并将它们全部禁用。

将该函数作为侦听器添加到 wrapper（使用事件委托）和运行添加更多 <select> 之后（以确保新选项的值被正确禁用），和运行它在 <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 &nbsp; 
    <span style="font-size:16px; font-weight:bold;">+ </span>   </button>
</div>

禁用动态下拉选项值 onchange 另一个动态下拉

Disable dynamic dropdown option value onchange another dynamic dropdown

javascript

jquery

dynamic

dropdown

populate