通过下拉列表过滤数据表

Question

在我的 Laravel 应用程序中，我使用 Datatables 来实现轻松过滤等。我设法开发了一个输入字段来搜索生成的表。为避免输入错误，我想使用下拉列表中选定选项的值。我一直在尝试一些事情，但我无法做到正确。

查看：

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Custom Filter</h3>
    </div>
    <div class="panel-body">
        <form method="POST" id="search-form" class="form-inline" role="form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" name="name" id="name" placeholder="search name">
            </div>
            <div class="form-group">
                <label for="category">Category</label>
                <select name="category" id="category" class="custom-select">
                    <option value="reset">-Categorie-</option>
                @foreach($adviceCategories as $category => $name)
                    <option value={{ $category }}>{{ $name }}</option>
                @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

部分控制器：

if ($name = $request->get('name')) {
    $advicePreparationsQuery->where('advice_protocols.name', 'like', "%$name%");
}
if ($category = $request->get('category')) {
    $advicePreparationsQuery->where('advice_protocols.category', 'like', "%$category%");
}

$advicePreparations = $advicePreparationsQuery->get();

$datatables = Datatables::of($advicePreparations)
    ....


    return $datatables->make(true);

还有我的脚本：

<script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#advicePreparations-table').DataTable({

            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "{{ route('advice_protocols.data') }}",
                data: function (d){
                    d.name = $('input[name=name]').val();
                    d.category = $('option[name=category]').text();
                }
            },
            "columns": [
                {data: 'name', name: 'name'},
                {data: 'category', name: 'category'},
                {data: 'question_name', name: 'goal'},
                {data: 'mergeColumn', name: 'mergeColumn'},
                {data: 'autheur', name: 'autheur'},
                {data: 'active', name: 'active'},
                {data: 'acties', name: 'acties', orderable: false, searchable: false},
                {data: 'delete', name:'delete', orderable: false, searchable: false}
            ]
        });
        $('#search-form').on('submit', function(e) {
            oTable.draw();
            e.preventDefault();
        });
    });
</script>

我尝试将输入类型从下拉列表更改为输入字段以检查查询是否错误，但这有效！我尝试将脚本行更改为：d.category = $('select[name=category]').val();.. 但这会在加载页面时执行查询！这会禁用所有类别的概述。有人可以帮我将选定的值用于查询吗？

Answer 1

你能试试这个代码是否有效？

$('select[name="category"]').on("change", function(event){
    var category = $('select[name="category"]').val();
    console.log(category);
    oTable.fnFilter("^"+ $(this).val() +"$", 2, false, false)

});