使用jQuery禁用已选下拉选项 避免动态新增行出现重复选择

你可以直接在原有JS代码后新增以下jQuery代码即可实现需求：

// 监听所有下拉框选中事件，动态生成的元素用事件委托
$("body").on("change", ".maintCostField", function() {
  // 收集所有已选中的有效值（排除默认的Choose...选项）
  let selectedValues = [];
  $(".maintCostField").each(function() {
    let val = $(this).val();
    if(val && val !== 'Choose...') {
      selectedValues.push(val);
    }
  });

  // 遍历所有下拉框的选项，更新禁用状态
  $(".maintCostField").each(function() {
    let currentSelect = $(this);
    let currentSelectedVal = currentSelect.val();
    currentSelect.find("option").each(function() {
      let optionVal = $(this).val();
      // 非默认值、在已选集合里、且不是当前下拉框自己选中的值，就禁用
      if(optionVal !== 'Choose...' && selectedValues.includes(optionVal) && optionVal !== currentSelectedVal) {
        $(this).prop("disabled", true);
      } else {
        $(this).prop("disabled", false);
      }
    });
  });
});

// 监听删除行事件，删除后重新更新选项禁用状态，释放被占用的选项
$("body").on("click", ".remove_node_btn_frm_field", function() {
  $(this).closest(".outer").remove();
  // 手动触发一次下拉框change事件刷新状态
  $(".maintCostField").first().trigger("change");
});

// 新增行后同步当前已有的禁用选项状态
$("body").on("click", ".add_new_frm_field_btn", function() {
  // 等DOM渲染完成后刷新状态
  setTimeout(() => {
    $(".maintCostField").first().trigger("change");
  }, 0);
});

补充说明 #

• 原有代码里所有下拉框都用了相同的id="id_casting"，不符合HTML规范，建议改成动态生成的唯一id，不影响当前功能运行。
• 代码同时兼容新增行、删除行的场景，选中、删除操作都会自动同步所有下拉框的选项禁用状态，不会出现选项被误锁的情况。

内容的提问来源于stack exchange，提问作者saadia