Javascript 使用多个下拉选择进行AJAX表筛选

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

我正在尝试使用AJAX过滤结果表。如何重新构造下面的代码，以便与2个或更多下拉列表一起使用？ 我已经搜索了好几个小时了，但我似乎无法理解，我把自己弄糊涂了

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

也许我应该在选择时使用点击事件？但是我不知道该怎么做

我特别不理解“data:{query:query}”如何与控制器相关

非常感谢您的帮助

我在wordpress上使用PHP和MYSQL

看法###############################################

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

---

欢迎来到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

param，如果未提供，则将其默认为“”，并使用数据{query:query}进行api调用。所以，回答您的问题时，第一个单词查询是参数名，第二个单词查询是随函数调用提供的输入参数值。例如，如果选择“John”，则对象

{query:query}

将类似于

{query:John'}

另外，我对您的

更改
功能做了一些改进：

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

谢谢你花时间帮忙！非常感谢！
$('#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);
});

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').on('change', function(){
    const thisVal = $(this).val();
 $('#hidden_country').val(thisVal);
console.log('the query is= ' + thisVal);
     load_data(thisVal);
    });