Я создал динамический зависимый список в моем проекте laravel, используя ajax, jquery и mysql. Это состоит из loan_amount, Interest_rate, Maximum_time_period и Company_id. Это зависит это правильно работать для первых трех переменных. Если я выберу loan_amount в соответствии с изменением интереса и максимума_периода. Но я выбрал Maximum_time_period в соответствии с этим company_id, не меняясь. Ниже приведен код для моих работ.
CompanyController
public function index()
{
$loan_details = DB::table('loans')
->groupBy('loan_amount')
->get();
return view('loancalculator')->with('loan_details', $loan_details);
}
public function fetch(Request $request)
{
$select = $request->get('select');
$value = $request->get('value');
$dependent = $request->get('dependent');
$data = DB::table('loans')
->where($select, $value)
->groupBy($dependent)
->get();
$output = '<option value="">Select '.ucfirst($dependent).'</option>';
foreach($data as $row)
{
$output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
}
echo $output;
}
Это код ajax и jquery для зависимого списка
loancalculator.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Loan Calculation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
border:1px solid #ccc;
}
</style>
</head>
<body>
<br />
<div class="container box">
<div class="form-group">
<form action="http://localhost/PHP/Arithmatic1.php" method="POST">
<div class="form-group">
Loan Amount:<br>
<select name="loan_amount" id="loan_amount" class="form-control input-lg dynamic" data-dependent="interest_rate">
<option value="">Select Loan Amount</option>
@foreach($loan_details as $loandetails)
<option value="{{ $loandetails->loan_amount}}">{{ $loandetails->loan_amount}}</option>
@endforeach
</select>
</div>
<br />
<div class="form-group">
Interest Rate:<br>
<select name="interest_rate" id="interest_rate" class="form-control input-lg dynamic" data-dependent="maximum_time_period">
<option value="">Select Interest Rate</option>
</select>
</div>
<br />
<div class="form-group">
Maximum Time Period to Repay:<br>
<select name="maximum_time_period" id="maximum_time_period" class="form-control input-lg" data-dependent="company_id">
<option value="">Select Maximun Time Period to Repay</option>
</select>
</div>
<div class="form-group">
company id:<br>
<select name="company_id" id="company_id" class="form-control input-lg" >
<option value="">Select company id</option>
</select>
</div>
{{ csrf_field() }}
<br />
<br />
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
$(document).ready(function(){
$('.dynamic').change(function(){
if($(this).val() != '')
{
var select = $(this).attr("id");
var value = $(this).val();
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('CompanyController.fetch') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
}
})
}
});
$('#loan_amount').change(function(){
$('#interest_rate').val('');
$('#maximum_time_period').val('');
$('#company_id').val('');
});
$('#interest_rate').change(function(){
$('#maximum_time_period').val('');
});
$('#maximum_time_period').change(function(){
$('#company_id').val('');
});
});
</script>
Вот код для маршрутов в web.php
Route::get('loancalculator','CompanyController@index');
Route::post('loancalculator/fetch', 'CompanyController@fetch')->name('CompanyController.fetch');