javascript - laravel 中下拉菜单发生变化时显示数据

Question

我的数据库中有一个数据，有 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);
    }

Answer 1

尝试改变你的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');
            }
        });
    });