Disattiva le opzioni in un elenco a discesa aggiunto utilizzando jQuery

Question

Sto usando quadro Yii2 php ed ecco come ho visualizzato il primo elenco a discesa:

<?php 
    $deductions = PayrollItems::find()->where(['store_id' => $session['store_id']])->orwhere(['store_id' => null])->where(['payroll_type' => 'Deduction'])->all(); 
    $deductionslistData = ArrayHelper::map($deductions,'payroll_items_id', 'payroll_name'); 
    echo $form->field($model2, 'deduction_item_id')->widget(Select2::classname(), [ 
     'data' => $deductionslistData, 
     'options' => ['placeholder' => 'Select a Deduction ', 'id' => 'deduction_item'], 
     'pluginOptions' => [ 
      'allowClear' => true 
     ], 
    ]); 
?> 

Ecco la funzione di script per l'aggiunta di un nuovo drop- discesa:

function addDeductionItem(){ 
    var count = $('#count2').val(); 
    if($('#deduction_item').val()=="" || $('#deduction_item_' + count).val()==""){ 
     alert("Please fill in the earning item field first!"); 
    } 
    else{ 
     count++ ; 
     $('#count2').val(count); 

     $.ajax({ 
      url: 'index.php?r=payslip/deductions', 
      dataType: 'json', 
      method: 'GET', 
      data: {}, 
      success: function (data, textStatus, jqXHR) { 
       $("#deduction_item_" + count).append($("<option></option>").html("")); 
       //$("#deduction_item_" + count).append($("<option></option>").val('add item').html("Add New Item")); 
       for(i=0; i<data.length;i++) 
       {      
        $("#deduction_item_" + count).append($("<option></option>").val(data[i][1]).html(data[i][0]));       
       } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log('An error occured!'); 
       alert('Error in ajax request'); 
      } 
     }); 

     var deduction = '<tr id="row_' + count +'"><td><select class="form-control input-md" placeholder="Select a Deduction " style="width: 100%; cursor: pointer;" data-krajee-select2="select2_6789bf5d" tabindex="-1" id="deduction_item_' + count + '" name="deduction_item_' + count + '"></select></td><td><input class="form-control" type="text" id="deduction_unit_' + count + '" name="deduction_unit_' + count + '"></td><td><input class="form-control" type="text" id="deduction_amount_' + count + '" name="deduction_amount_' + count + '" onchange="_getTotalDeduction(id)"></td>'; 

     deduction += '<td><a style="cursor:pointer" class="ibtnDel"><i class="fa fa-times">&nbsp;&nbsp;</a></td></tr>';  

     $("#deduction_items").append(deduction); 

     $("#deduction_items").on('click','.ibtnDel',function(){ 
      $(this).closest('tr').remove(); 
     }); 

     $('#row_' + count + ' select').select2(); 
    }   
} 

ho un elenco a discesa, dico per esempio che ha 3 opzioni, poi ho selezionare l'opzione 01. Ora, quando aggiungo un nuovo elenco a discesa (facendo clic sul pulsante "Aggiungi Deduction Item "nel mio caso, l'opzione 01 nell'elenco a discesa aggiunto sarà disabilitata.

L'idea generale è che quando seleziono un'opzione nel primo elenco a discesa, l'opzione selezionata deve essere ora disabilitata nell'elenco a discesa aggiunto e così via.

Ho cercato questo problema su Internet. Ho trovato alcuni ma non funzionano per me perché il mio problema non è molto simile a quelli che ho trovato.

Ho trovato e provato questo violino: http://jsfiddle.net/rajan222000/yww8apn9/1/ Ma ancora non funziona per me. Ho notato che ha un numero statico di elenchi a discesa. Ho provato var deductionID = 'deduction_item_' + count + ''; per renderlo dinamico, ma non so perché non funzioni.

Ho davvero bisogno del tuo aiuto con questo.

Answer 1

Se ho capito bene, è necessario recuperare tutti i valori selezionati dei menu a discesa già generati e disabilitarli nel menu a discesa appena creato.

Senza alcun refactoring del codice, è necessario avviare un ciclo for semplice e disabilitare tutti i valori selezionati nel nuovo menu a discesa.

L'aggiunta di questo alla fine della funzione successo nella chiamata Ajax dovrebbe fare il trucco:

for(var c=count-1; c>=0; c--) { 
    var sel = $("#deduction_item_" + c).val(); 
    $("#deduction_item_" + count).find("option[value'"+sel+"']").prop('disabled', true); 
}