具有多个下拉选择的 AJAX 表过滤

Question

在我的大学项目中需要一些帮助。

我正在尝试使用 AJAX 过滤结果表。如何重新构建下面的代码以用于 2 个或更多下拉菜单？ 我已经进行了数小时的搜索，但我似乎无法理解，我自己也很困惑。

下面的代码确实有效，但是我不完全理解下拉菜单的点击事件和将 JSON 数据传递给 AJAX 处理程序之间的关系。

也许我应该在选择时使用点击事件？但是我不确定如何去做。

我特别不明白“data:{query:query}”是如何与控制器相关的

非常感谢您的帮助！

我在 wordpress 上使用 PHP 和 MYSQL。

查看############################################# #

  <!-- Drop Down 1 --> 
  <div class="filter-group">
    <label>Name</label>
    <select name="multi_search_filter" id="multi_search_filter" class="form- 
    control selectpicker">
    <option value="">All</option>
    <option value="Michael">Michael</option>
    <option value="John">John</option>
    <option value="Smith">Smith</option>
    <option value="Tim">Tim</option>
    </select>

    <input type="hidden" name="hidden_country" id="hidden_country" />
    <div style="clear:both"></div>
  </div>

  <!-- Drop Down 2 --> 
  <div class="filter-group">
    <label>Year</label>
    <select name="multi_search_filter2" id="multi_search_filter2" class="form-control selectpicker">
    <option value="">All</option>
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    </select>

    <input type="hidden" name="hidden_country2" id="hidden_country2" />
    <div style="clear:both"></div>
  </div>

AJAX 处理程序########################################

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


});

模型/控制器########################################

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

Answer 1

欢迎来到 SO。让我试着解释一下

$('#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);
});

在每个脚本中，您的脚本都设置为隐藏的输入选定值，然后使用该值两次进行分配而不更改它们。这不是一个好方法。然后使用这个先前分配的值调用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);
   }
  })

此函数使用 query 参数，如果未提供，则默认为 '' 并使用数据 {query:query} 进行 api 调用。因此，回答您的问题的第一个词查询是参数名称，第二个词查询是函数调用提供的输入参数值。例如，如果您选择“John”，您的对象 {query:query} 将看起来像 {query: 'John'}。

PS。我对你的 change 函数做了一些改进：

$('#multi_search_filter').on('change', function(){
    const thisVal = $(this).val();
 $('#hidden_country').val(thisVal);
console.log('the query is= ' + thisVal);
     load_data(thisVal);
    });