ドロップダウンリストからデータテーブルをフィルタリングする

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) 

});