Wyłącz opcje w liście rozwijanej załączonym jQuery

Question

używam ramy Yii2 php i oto jak ja wyświetlane pierwszą listę rozwijaną:

<?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 
     ], 
    ]); 
?> 

Oto funkcja skrypt do dopisywania nowego rozwijanym listy w dół:

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(); 
    }   
} 

mam listę rozwijaną, powiedzmy na przykład, że ma 3 opcje, następnie wybierz opcję 01. teraz, kiedy dołączy do nowej listy rozwijanej (klikając na przycisk „Dodaj Pozycja "dedukcja" w moim przypadku), opcja 01 na dołączonej liście rozwijanej zostanie wyłączona.

Cała myśl polega na tym, że po wybraniu opcji na pierwszej liście rozwijanej ta wybrana opcja powinna być teraz wyłączona na dołączonej liście rozwijanej i tak dalej.

Przeszukałem ten problem przez Internet. Znalazłem trochę, ale one po prostu nie działają dla mnie, ponieważ mój problem nie jest bardzo podobny do tych, które znalazłem.

Znalazłem i wypróbowałem to skrzypce: http://jsfiddle.net/rajan222000/yww8apn9/1/ Ale nadal nie działają dla mnie. Zauważyłem, że ma statyczną liczbę list rozwijanych. Próbowałem var deductionID = 'deduction_item_' + count + '';, aby uczynić go dynamicznym, ale nie wiem, dlaczego to nie działa.

Naprawdę potrzebuję twojej pomocy w tym.

Answer 1

Jeśli rozumiem to poprawnie, musisz pobrać wszystkie wybrane wartości z już wygenerowanych rozwijanych i wyłączyć je w nowo utworzonym menu rozwijanym.

Bez żadnego refaktoryzacji kodu należy uruchomić prostą pętlę for i wyłączyć wszystkie wybrane wartości w nowej liście rozwijanej.

Dodając to do końca funkcji sukces w wywołaniu Ajax powinno załatwić sprawę:

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