Отключите параметры в раскрывающемся списке с помощью jQuery

Я использую фреймворк Yii2 php и вот как я отобразил первый выпадающий список:

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

Вот функция скрипта для добавления нового выпадающего списка:

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

У меня есть выпадающий список, скажем, например, у него есть 3 варианта, затем я выбираю вариант 01. Теперь, когда я добавляю новый выпадающий список (нажав кнопку «Добавить элемент вычета» в моем случае), вариант 01 в раскрывающемся списке будет отключен.

Суть в том, что когда я выбираю опцию в первом раскрывающемся списке, эта выбранная опция теперь должна быть отключена в раскрывающемся списке и т.д.

Я искал эту проблему через Интернет. Я нашел некоторые, но они просто не работают для меня, потому что моя проблема не очень похожа на те, которые я нашел.

Я нашел и попробовал эту скрипку: http://jsfiddle.net/rajan222000/yww8apn9/1/
Но все еще не работает для меня. Я заметил, что у этого есть статическое число выпадающих списков. Я старался var deductionID = 'deduction_item_' + count + ''; чтобы сделать его динамичным, но я не знаю, почему это не работает.

Мне действительно нужна твоя помощь с этим.

5

Решение

Если я правильно понимаю, вам нужно получить все выбранные значения уже сгенерированных выпадающих списков и отключить их во вновь созданном раскрывающемся списке.

Без какого-либо рефакторинга кода вам нужно запустить простой цикл for и отключить все выбранные значения в новом раскрывающемся списке.

Добавление этого в конец функции успеха в вызове Ajax должно помочь:

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

Другие решения

Других решений пока нет …