Datatable filter based on Select dropdown

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<div class="job-finder">
<div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="form-search-cat">
        <input type="search" class="search_table" id="search_table" placeholder="Search by keywords">
          <select id="select_tag" class="select2-original">     
            <option>Category</option>
            <option value="Category1">Category1</option>
            <option value="Category2">Category2</option>       
            <option value="Category3">Category3</option>  
          </select>
          <a href="javascript:void(0)" class="button find-jobs">Find Jobs</a>
        </div>
        <div class="opening-count">
          <p>
            <strong>Showing all openings</strong> (<span id="job-count"></span> Results)
          </p>
        </div>
      </div>
    </div>
    <div class="row no-padd-row">
      <div class="col-md-12 mob-no-padd">
        <table id="job_c2_table" class="table table-striped table-bordered dt-responsive" width="100%">
    <thead>
        <tr>
            <th>Job Title</th>
            <th>Company</th>
            <th>Category</th>
            <th>Type</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr data-mytag = "tag1">
            <td>Lorem ipsum 1</td>
            <td>Ram</td>
            <td>Category1</td>
            <td>On Site</td>
            <td>Invite</td>
        </tr>
        <tr data-mytag = "tag2">
            <td>Lorem ipsum 2</td>
            <td>Shiva</td>
            <td>Category2</td>
            <td>Remote</td>
            <td>Invite</td>
        </tr>
        <tr data-mytag = "tag2">
              <td>Lorem ipsum 3</td>
              <td>Vishnu</td>
              <td>Category2</td>
              <td>On Site</td>
              <td>Invite</td>
         </tr>
        <tr data-mytag = "tag1">
            <td>Lorem ipsum 4</td>
            <td>Sita</td>
            <td>Category1</td>
            <td>Off Site</td>
            <td>Invite</td>
        </tr>
       <tr data-mytag = "tag3">
            <td>Lorem ipsum 5</td>
            <td>Lorem</td>
            <td>Category3</td>
            <td>CA</td>
            <td>Invite</td>
        </tr>
      <tr data-mytag = "tag1">
            <td>Lorem ipsum 1</td>
            <td>Ram</td>
            <td>Category1</td>
            <td>On Site</td>
            <td>Invite</td>
        </tr>
      <tr data-mytag = "tag1">
            <td>Lorem ipsum 4</td>
            <td>Sita</td>
            <td>Category1</td>
            <td>Off Site</td>
            <td>Invite</td>
        </tr>
    </tbody>
</table>
      </div>
    </div>
</div>
</div>
     {% require_js %}
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
var mytable= $('#job_c2_table').DataTable();
calc_row();
$('.find-jobs').on('click', function () {
  get_sel_val = $('#select_tag').val();
   mytable.search(get_sel_val).draw();  
 // console.log(get_sel_val);
  calc_row();
 // mytable.draw();
});
$('#search_table').keyup(function(){
        mytable.search($(this).val()).draw() ;
        calc_row();
})
function calc_row(){
var table_length = $('#job_c2_table tbody tr').length;
var table_length_empty = $('#job_c2_table tbody tr td.dataTables_empty').length;
if(table_length_empty===1){
table_length = 0;
}
 $('#job-count').html(table_length);
}
// $.fn.dataTable.ext.search.push(
//      function( settings, searchData, index, rowData, counter ) {
//        var row = mytable.row(index).node();
//        var filterValue = $(row).data('mytag');
//        var e = document.getElementById("select_tag");
//        var filter = e.options[e.selectedIndex].value;
//        if(filterValue == filter)
//           return true;
        //        return false;
  //      }
// );
</script>
{% end_require_js %}