通过下拉列表过滤数据表

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)
});