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

Question

我想知道实现以下目标的最简洁方法是什么：

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

<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>

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

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

感谢您的帮助。

Answer 1

不确定您检查的实际标准是什么（例如包含这些值的字符串，数组包含具有 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']
})

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

Dropdown Filters and complex conditional statements

javascript

jquery

conditional

d3.js