title: AJAX table filtering with more than one drop down select
body: <p>Need a bit of help with my university project. </p>
  
  <p>I'm trying to filter a table of results using AJAX. How do I re-structure the code below for use with 2 or more drop downs?
  I've been doing hours of searching but I just can't seem to understand and I'm confusing myself.</p>
  
  <p>The following code below does work however I don't understand fully the relation between the click event of the dropdown and passing the JSON data to the AJAX handler.</p>
  
  <p>Perhaps I should use a on click event when selected? However I'm unsure how to go about this. </p>
  
  <p>I particularly don't understand how "data:{query:query}," works in relation to the controller  </p>
  
  <p>Your help would be highly appreciated!</p>
  
  <p>I'm using PHP and MYSQL on wordpress.</p>
  
  <p>VIEW ###############################################</p>
  
  <pre><code>  &lt;!-- Drop Down 1 --&gt; 
    &lt;div class="filter-group"&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;select name="multi_search_filter" id="multi_search_filter" class="form- 
      control selectpicker"&gt;
      &lt;option value=""&gt;All&lt;/option&gt;
      &lt;option value="Michael"&gt;Michael&lt;/option&gt;
      &lt;option value="John"&gt;John&lt;/option&gt;
      &lt;option value="Smith"&gt;Smith&lt;/option&gt;
      &lt;option value="Tim"&gt;Tim&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="hidden" name="hidden_country" id="hidden_country" /&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Drop Down 2 --&gt; 
    &lt;div class="filter-group"&gt;
      &lt;label&gt;Year&lt;/label&gt;
      &lt;select name="multi_search_filter2" id="multi_search_filter2" class="form-control selectpicker"&gt;
      &lt;option value=""&gt;All&lt;/option&gt;
      &lt;option value="2019"&gt;2019&lt;/option&gt;
      &lt;option value="2018"&gt;2018&lt;/option&gt;
      &lt;option value="2017"&gt;2017&lt;/option&gt;
      &lt;option value="2016"&gt;2016&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="hidden" name="hidden_country2" id="hidden_country2" /&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>AJAX HANDLER #########################################</p>
  
  <pre><code>$(document).ready(function(){
  
   load_data();
  
   function load_data(query='')
   {
    $.ajax({
     url:"/ajax-index-test-fetch.php",
     method:"POST",
     data:{query:query},
     success:function(data)
     {
      $('#ul-table').html(data);
     }
    })
  }
  
  
  $('#multi_search_filter').change(function(){
   $('#hidden_country').val($('#multi_search_filter').val());
  
   var getSelectName = $('#hidden_country').val();
   var query = $('#hidden_country').val();
   load_data(query);
  
   console.log('the query is= ' + query);
  });
  
  
  });
  </code></pre>
  
  <p>MODEL/CONTROLLER  #########################################</p>
  
  <pre><code> if($_POST["query"] != '')
   {
  
   $search_array = explode(",", $_POST["query"]);
  
   $search_text = "'" . implode("', '", $search_array) . "'";
   $query = "SELECT *
   FROM NominatorTBL
   LEFT OUTER JOIN Nominator_NomineeLinkTBL
   ON NominatorTBL.Nonimator_ID = Nominator_NomineeLinkTBL.Nonimator_ID
   LEFT OUTER JOIN  Nominee_ConfirmTBL
   ON Nominator_NomineeLinkTBL.Nominee_ID = Nominee_ConfirmTBL.Nominee_ID
   WHERE NominatorTBL.NomineeCategory1 = (".$search_text.")";
  
   } else {
  
   $query = "SELECT *
   LEFT OUTER JOIN Nominator_NomineeLinkTBL
   ON NominatorTBL.Nonimator_ID = Nominator_NomineeLinkTBL.Nonimator_ID
   LEFT OUTER JOIN  Nominee_ConfirmTBL
   ON Nominator_NomineeLinkTBL.Nominee_ID = Nominee_ConfirmTBL.Nominee_ID";
   }
  </code></pre>