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

在任何情况下你都需要编写一些代码，但你可以减少它，例如：

$("#categories").change(function() {
   uri = "myurl";

   var filters = {
     status: $("#statusfilter").val(),
     category: $("#categories").val(),
     network: $("#networksfilter").val(),
     prod_type: $("#prodtypefilter").val()
   }; // order is important

   loadData(filters );
});

loadData(filters) {
  var url = '';
  for (var filterName in filters)
     url += '/' + (filters[filterName] || 'any'); // here some def value needed

  url = url.substring(1); // cut first slash
  $('#userdata').load(url);
}

修改

或者甚至喜欢这样：

loadData(filters) { var url = Object.keys(filters).map(function(el) { return filters[el] || 'any'; }).join('/'); $('#userdata').load(url); }

Answer 2

将过滤器元素的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()遍历其元素，在每个元素上调用一个函数并在数组中记录所选的选项值。

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

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

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

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

2 个答案: