我的数据库中有一个数据，有 2 个名为注册的表，问题我需要根据问题 Question_schedul(视为状态)=1 或 2 显示注册表数据，在我的索引页面中有一个下拉列表包含 24小时和 15 天，与 Question_schedul(status) 相关。当我选择 24 小时时，我需要显示与所选状态相对应的数据
Javascript code for dropdown
$(function () {
$("#dropselect").change(function () {
let $value;
if ($(this).val() === "24Hours") {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('tracks24or15')}}',
data: {'dropselect': $value},
success: function (data) {
$('#listdetails').html(data);
// console.log(data);
}
});
}
else {
if ($(this).val() === "15Days") {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('tracks24or15')}}',
data: {'dropselect': $value},
success: function (data) {
$('#listdetails').html(data);
// console.log(data);
});
}
else
{
alert('Select Status');
}
});
});
Index Page
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title float-left">SSI TRACK</h4>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-12">
<div class="card-box table-responsive">
<h4 class="m-t-0 header-title"><b>SSI TRACKS</b></h4>
<div id="datatable_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-6">
<select class="form-control" style="width: 150px" id="dropselect" name="dropselect">
<option>Select Status</option>
<option value="24Hours">24 Hours</option>
<option value="15Days">15 Days</option>
{{--<option value="3">All</option>--}}
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="datatable" class="table table-bordered dataTable table-responsive-lg">
<thead>
<tr>
<th>slno</th>
<th>Address</th>
<th>Model</th>
<th>Chassis</th>
<th>Delivery Date</th>
<th>Call</th>
</tr>
</thead>
<tbody id="listdetails">
@foreach($registeration as $registerations)
<tr>
<td class="sorting_1">{{$loop->iteration}}</td>
<td>{{$registerations->address}}</td>
<td>{{$registerations->model}}</td>
<td>{{$registerations->chassis}}</td>
<td>{{$registerations->delivery_date}}</td>
<td>
<button class="btn btn-primary btn-rounded button">Call Customer
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的 Controller 具有功能
public function tracks24or15(Request $request)
{
$register = DB::table('registrations')
->join('questions', 'registrations.registration_id', '=', 'questions.question_id')
->select('address', 'model', 'chassis', 'delivery_date')
->where([["questions.question_schedul", "=", 1] || ["questions.question_schedul", "=", 2] ])
->get();
$output = "";
$count = 1;
foreach ($register as $key => $reg) {
$output .= '<tr>' .
'<td>' . $count++ . '</td>' .
'<td>' . $reg->address . '</td>' .
'<td>' . $reg->model . '</td>' .
'<td>' . $reg->chassis . '</td>' .
'<td>' . $reg->delivery_date . '</td>' .
'<td>' . '<button>Callback</button>'. '</td>' .
// '<td>' . '.<a href="' . route('ssitrack') . '">.' . '<img src="assets/images/select.jpg" class="imgsize">.' . '</a>.' . '</td>' .
'</tr>';
}
return Response($output);
}
最佳答案
尝试改变你的js
更改网址
网址:{{url("tracks24or15")}}
在ajax调用中添加数据类型 数据类型:'json'，
由于你的两个 ajax 调用是相同的，所以我合并为一个
下拉菜单的Javascript代码
$(function () {
$("#dropselect").change(function () {
let $value;
if (($(this).val() === "24Hours") || ($(this).val() === "15Days")) {
$value = $(this).val();
$.ajax({
type: 'GET',
url: {{url("tracks24or15")}},
data: {'dropselect': $value},
dataType: 'json',
success: function (data) {
$('#listdetails').html(data);
// console.log(data);
}
});
}
else
{
alert('Select Status');
}
});
});
关于javascript - laravel 中下拉菜单发生变化时显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49994134/