有効無効前のドロップダウンに基づいてオプションを選択しますか？

Question

私は2ドロップダウンを持って、1を選択し、[2]を選択言うことができますユーザーがドロップダウン選択すると、シナリオがある選択1ように、とAを選択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/