javascript - 具有多个下拉过滤器的页面

Question

我有一个页面，它使用下拉菜单来过滤列表。我现在有超过 10 个过滤器，每个更改函数都调用 AJAX 请求并将相应的变量传递给 PHP 函数。像这样:

$("#categories").change(function() {
  uri = "myurl" ;
  var status=$("#statusfilter").val();
  var category=$("#categories").val();
  var network=$("#networksfilter").val();
  var prod_type = $("#prodtypefilter").val();
  loadData(uri,category,status,network,prod_type);
});

在 loadData() 中我有以下代码:

function loadData(uri,category,status,network,prod_type){
  url + = category+"/"+status+"/"+network+"/"+prod_type;
  $('#userdata').load(url); 
}

这里我只给出了 4 个过滤器，但实际上是 10 个，并且可能会增加。无论如何，这工作正常。但问题是，当我增加过滤器时，我需要为每个下拉更改函数编写相同的内容。有没有更好的方法来优化代码，这样我就不需要加载一堆 JS 了？

Answer 1

重命名过滤器元素的 ID，使其以相同的单词开头，例如“filter_”。然后一次性获取所有这些:

$('select[id^="filter_"]').change(function() {
    var uri = "myurl";
    var filters = new Array();

    $('select[id^="filter_"]').map(function () { 
        filters[$(this).name()] = $(this).val(); // not tested, just an idea
    });

    loadData(uri,filters);
});

.map() 迭代其元素，对每个元素调用一个函数并将所选选项值记录在数组中。

如果 .map() 对您来说更直观，您可以使用 .each():

$.each('select[id^="filter_"]', function() {
   filters[$(this).name()] = $(this).val(); // not tested, just an idea
});

注意:最好使用关联数组，正如 @Tony 下面注意到的那样，以确定哪个过滤器适用于服务器端脚本中的哪个数据库表属性。