基于多个可能的DIV内容的Javascript操作

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

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

显示与传递给函数的状态匹配的所有父div。我在城市选择方面有问题。我希望用户能够选择多个城市，因此我需要一些方法来显示所有父DIV，其中城市DIV与任何选定城市匹配，并且仍然与州匹配。我首先隐藏所有div，然后显示匹配的状态，然后尝试隐藏不匹配的城市。比如：

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

显然，[city1或city2或city3或…]部分不起作用。有没有关于如何在这样的多个输入下工作的建议

谢谢

使用

filter（）

m方法

我不确定您的复选框是如何设置的，所以将对它们进行伪代码

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

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%清楚您在寻找什么

谢谢！我已经有了一系列检查过的城市，所以我并没有测试那个部分，但过滤功能工作得非常好！

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