时间戳

首页 > 解决方案 > 下拉过滤器和复杂的条件语句

javascript - 下拉过滤器和复杂的条件语句

问题描述

我想知道实现以下目标的最干净的方法是：

我有很多这样的下拉菜单，我用它们来过滤数组。

<select class="fselect">
  <option value="All A types">All A types</option>
  <option value="A1">A1</option>
  <option value="A2">A2</option>
</select>
<select class="fselect">
  <option value="All B types">All B types</option>
  <option value="B1">B1</option>
  <option value="B2">B2</option>
</select>
<select class="fselect">
  <option value="All C types">All C types</option>
  <option value="C1">C1</option>
  <option value="C2">C2</option>
</select>
<select class="fselect">
  <option value="All D types">All D types</option>
  <option value="D1">D1</option>
  <option value="D2">D2</option>
</select>

过滤器是 AND OR。这样用户可以只搜索 A1 或 D2，或者他们可以搜索 A2 和 B1，或所有 C 类型和 D2 或 A2、B2、C1 和 D2 等。因此，可能的组合数量越来越多。

我希望有一种方法可以做到这一点，而无需编写非常复杂的 if else 或 switch 语句，因为可能有多达 8 个不同的下拉菜单。我正在使用 jQuery 和 D3 v3 库。

谢谢你的帮助。

标签： javascriptjqueryd3.jsconditional

解决方案

不确定您要检查的实际标准是什么（例如，包含这些值的字符串，数组包含具有类似值的对象c:1，数组包含字符串数组['C1','A1','A2']等）。

一种可能的方法来满足过滤器要求。

var filters = []

//Monitor all dropdowns for a change
$('.fselect').change(funciton(e){
 //On change, check all of them for current state
 $('.fselect').each(function(){ // not sure if we can use $(this) ?
  $(this).val() && filters.push($(this).val()) // If you include an 'empty' value for a non-used filter then don't add to array
 })
 // filters = ['A1','All C types']
})

推荐阅读