Abilitato Disabilitato Selezionare l'opzione in base al menu a discesa precedente?

Question

ho 2 menu a discesa, diciamo seleziona 1 e seleziona 2, lo scenario è quando l'utente seleziona il menu a discesa su seleziona 1 e scegli A, quindi seleziona 2 , l'opzione A sarà disabilitata.

Ecco il mio codice, in realtà funziona,

ma ho una condizione in cui l'utente modificherà il menu a discesa, su seleziona 1 l'utente già sceglie A ma seleziona 2 ancora non selezionato, quello che voglio è che l'opzione A in seleziona 2 deve essere disabilitato, ma attualmente è ancora abilitato

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

Puoi assicurarti che la selezione iniziale da #pr_bundlingsia disabilitata al caricamento della pagina spostando il codice di aggiornamento in una funzione e richiamandola $(document).ready(direttamente o tramite .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

Il selettore è sbagliato mentre disabilita il valore di select 2.

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

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