已启用 已禁用 根据先前的下拉菜单选择选项？

Question

我有 2 个下拉菜单，比如说选择 1 和选择 2，场景是 当用户在select 1上选择下拉菜单并选择A，如此select 2，选项A将被禁用。

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

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

jsfiddle https://jsfiddle.net/q3mu7x2w/

$("#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

您可以确保在页面加载时禁用来自#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>

Answer 2

禁用select 2的值时选择器错误。

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

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