0

我需要帮助为根据城市和州而变化的页面编写 javascript 过滤器。州选项以单个选择下拉菜单的形式提供，城市以复选框的形式呈现（即可以选择多个城市）。所有 DIV（包含一个城市 DIV 和一个州 DIV 的父 DIV）在其各自的 DIV 中包含城市和州名称，如下所示：

<div class='row'>
  <div class='state'>Alabama</div>
  <div class='city'>Anniston</div>
</div>

这些最初加载在页面上，然后根据初始过滤器（state='AL' city='all'）隐藏。当用户通过选择新状态或选中/取消选中城市来更改过滤器时，它会触发一个 javascript 函数，该函数重新评估哪些 DIV 是隐藏的，哪些是显示的。

状态过滤器很好用：

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();

显示与传递给函数的状态匹配的所有父 DIV。我在选择城市时遇到问题。我希望用户能够选择多个城市，因此我需要某种方式来显示所有父 DIV，其中城市 DIV 与任何选定城市匹配并且仍然与州匹配。我首先隐藏所有 DIV，然后显示匹配状态，然后尝试隐藏不匹配的城市。就像是：

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();
$(".city:not(:contains('" + [city1 OR city2 OR city3 OR ...] + "'))").parent().hide();

显然 [city1 OR city2 OR city3 OR ...] 部分不起作用。关于如何使用这样的多个输入来实现此功能的任何建议？

谢谢！

4

1 回答 1

1

使用filter()方法

我不确定您的复选框是如何设置的，因此将对它们进行伪编码

首先创建所有城市的数组：

var cities=$('.cityCheckBox:checked').map(function(){
  return this.value
}).get();

现在根据不在数组中的文本过滤城市元素

$(".parent").show();
$('.city').filter(function(){
   var city=$.trim($(this).text());
   /* return only cities not in array*/
   return $.inArray( city,cities) == -1;
}).parent().hide();

这假设您仅按城市过滤。对于过滤器，城市和州只需要在过滤器功能中进行更强大的测试。不是 100% 清楚您在寻找什么

于 2013-10-31T03:08:58.120 回答