Disable options in application dropdown using jQuery

Question

I am using the Yii2 php framework, and this is how I displayed the first drop down list:

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

Here is the script function to add a new dropdown:

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

I have a drop-down list, for example, it has 3 options, then I select option 01. Now, when I add a new drop-down list (by clicking the "Add deduction element" button in my case), option 01 is added to the drop-down list.

The whole idea is that when I select an option in the first drop-down list, this selected option should now be disabled in the drop-down list of applications, etc.

I searched for this problem over the internet. I found some, but they just do not work for me, because my problem is not very similar to the ones I found.

I found and tried this script: http://jsfiddle.net/rajan222000/yww8apn9/1/ But still not working for me. I noticed that it has a static number of dropdowns. I tried var deductionID = 'deduction_item_' + count + ''; make it dynamic, but I don’t know why it is not working.

I really need your help.

Answer 1

If I understand this correctly, you need to get all the selected values ​​of the already generated drop-down lists and disable them in the pop-up drop-down list.

Without refactoring the code, you need to run a simple loop and disable all selected values ​​in the new drop-down list.

Adding this to the end of the success function in an Ajax call should do the trick:

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