[英]how to make drop-down list dependent form another drop-down list in laravel using Jquery?
[英]Disable options in an appended drop-down list using 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"> </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 + '';
使它動態,但我不知道為什么它不起作用。
我真的需要你的幫助。
如果我理解正確,那么您需要獲取已生成的下拉列表的所有選定值,並在新創建的下拉列表中禁用它。
如果沒有任何代碼重構,您需要啟動一個簡單的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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.