Enabled Disabled Select 选项基于之前的下拉列表？

Question

我有 2 个下拉菜单，假设 select 1 和 select 2，场景是当用户 select 在 select 1 上下拉并选择 A 时，在 select 2 上选择 A将被禁用。

这是我的代码，实际上这是有效的，

但我有一个条件，当用户将编辑下拉列表时，select 1 用户已经选择了 A 但 select 2 仍然没有 selected，我想要的是选项select 2中的A必须禁用，但目前它仍然启用

$("#pr_bundling").change(function(){

    $("#pr_cross").find("option").each(function(){
        $(this).removeAttr("disabled");
    });
    $("#pr_cross [value=" + $(this).val() + "]").attr("disabled","disabled");

    $('#pr_cross').not(this).has('option[value="'+  this.value + '"]:selected').val('noselect29');



})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
  <select class="form-control" id="pr_bundling">
    <option value='noselect99' selected >Select</option>
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<br>

<h3>select 2</h3>
 <select class="form-control" id="pr_cross">
      <option value='noselect29' selected >Select</option>
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
 </select>

Answer 1

禁用select的值时selector是错误的 2.

$("#pr_cross option[value=" + $(this).val() + "]").attr("disabled","disabled");

jsfiddle: https://jsfiddle.net/bs7h0got/

Answer 2

您可以确保在页面加载时禁用来自 #pr_bundling 的初始选择，方法是将您的更新代码移动到一个函数中并在 $(document).ready 上调用它（直接或通过 .trigger ).

function update_select() {
  let selected = $('#pr_bundling').val();
  $("#pr_cross").find("option").each(function() {
    $(this).removeAttr("disabled");
  });
  $("#pr_cross [value=" + selected + "]").attr("disabled", "disabled");
}
$(document).ready(function() {
  $("#pr_bundling").change(update_select);
  update_select();
  // or you can trigger the change handler:
  // $("#pr_bundling").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
  <option value='noselect99' selected>Select</option>
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<br>

<h3>select 2</h3>
<select class="form-control" id="pr_cross">
  <option value='noselect29' selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>

Enabled Disabled Select 选项基于之前的下拉列表？

Enabled Disabled Select option based on previous dropdown?

html

jquery

select

option

dropdown