单击“添加新字段”时,我有一个按钮,它将填充新的选择:javascript - 在更改另一个动态下拉菜单时禁用动态下拉菜单选项值-LMLPHP

下拉列表中创建的所有类都是“ staff_list”和name =“ staff_id []”
创建的下拉列表的最大限制为5,并且允许用户删除创建的下拉列表。
javascript - 在更改另一个动态下拉菜单时禁用动态下拉菜单选项值-LMLPHP

问题:如何禁用在另一个下拉菜单中选择的下拉菜单值?


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

-option value在其他下拉列表中更改为可用。有什么想法可以解决吗?


先谢谢了!

下面是我的示例代码:



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>

最佳答案

我将创建一个检查每个选定值的函数,然后启用所有option,在.staff_list中搜索该数组中当前未选中的option,并全部禁用它们。

将该函数添加为wrapper的侦听器(具有事件委托),并在附加更多<select>之后运行它(以确保正确禁用新选项的值),并在删除<select>之后运行它(因此,如果该<select>处于选中状态,则现在将在其他元素中再次启用其值)。

这样可以确保在发生更改时正确重新计算禁用的option

请注意,由于当前只有3个可能的值(abc),所以当前只能更改三个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>

10-05 20:49
查看更多