时间戳

首页 > 解决方案 > laravel 中用于过滤表数据的下拉菜单

laravel - laravel 中用于过滤表数据的下拉菜单

问题描述

我想知道 Laravel 的一些东西。我想要一个班级的下拉菜单，所以当用户选择任何班级并按下提交按钮时，与该特定班级相关的用户将显示在表格的下方......有可能吗？

下面是我为获取数据所做的代码，但我希望这些数据在 HTML 中引用我的表，因为我想要更多的东西，我不能将这些东西添加到 ajax 表中

//我的ajax

$(document).ready(function() {

        $('select[name="students_class_id"]').on('change', function() {

            var classID = $(this).val();

            if(classID) {

                $.ajax({

                    url: '/myform/ajax/'+classID,

                    type: "GET",

                    dataType: "json",


                    success:function(data) {

                        var markup = '';

                        $.each(data, function(key, value) {
                             markup += '<tr> <td>' + value.id + '</td> <td>' + value.student_id + '</td> <td>' + value.first_name+ ' '  + value.last_name + '</td> <tr>';

                        });
                        $('table[id="studentsData"]').html(markup);
                    }

                });

            }

        });

    });

//控制器

 public function index(Request $request){
        $classes = StudentsClass::pluck('class_name', 'id')->all();
        return view('admin.students.attendance.index', compact( 'classes'));
    }

public function mytableAjax($id) {
    $students = Student::where('students_class_id', $id)->get();
    return json_encode($students);
}

//我的观点

    <select name="students_class_id" class="form-control" style="width:350px">

        <option value="">--- Select State ---</option>

        @foreach ($classes as $key => $value)

            <option value="{{ $key }}">{{ $value }}</option>

        @endforeach

    </select>



    <table id="studentsData" class="table table-striped table-bordered table-list-search">
        <thead>
        <tr>
            <th>#</th>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Attendance</th>
        </tr>
        </thead>

        <tbody>
            <tr>

                <td>
                    <div class="form-group">
                        <select class="form-control" id="gender">
                            <option>Present</option>
                            <option>Absent</option>
                            <option>Leave</option>
                        </select>
                    </div>
                </td>
            </tr>
        </tbody>

    </table>
    <a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
</div>

标签： laraveldropdown

解决方案

检查以下将为attendance每一行添加列的代码：

$(document).ready(function() {
  $('select[name="students_class_id"]').on('change', function() {
    var classID = $(this).val();

    if (classID) {
      $.ajax({
        url: '/myform/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {
          var attendance = `<div class="form-group">
                        <select class="form-control" id="gender" name="attendance[]">
                            <option>Present</option>
                            <option>Absent</option>
                            <option>Leave</option>
                        </select>
                    </div>`;
          var markup = '';

          $.each(data, function(key, value) {
            markup += '<tr> <td><input type="hidden" value="'+value.id+'" name="id[]">' + value.id + '</td> <td>' + value.student_id + '</td> <td>' + value.first_name + ' ' + value.last_name + '</td> <td> ' + attendance + '</td> <tr>';
          });

          $('#studentsData tbody').html(markup);

          var thead_markup += '<tr> <th>A</th> <th>B</th> <th>C</th> <td>D</th> <tr>';
          $('#studentsData thead').html(thead_markup);
        }
      });
    }
  });
});

推荐阅读