javascript - 如何从数组中实现二级过滤数据？

Question

我正在编写以下代码。我如何更新/过滤 groups 列表首先基于单选选项，然后通过复选框选择？

如您所见，我可以通过 radio 过滤列表(不确定如何使代码更短而不是使用 3 个 if 子句？)但我不知道如何运行第二部分(复选框)，特别是一些它们不适用于 radio

var groups = [
  ['Asia', 'G1', 1, 'ASG1'],
  ['Asia', 'G1', 1, 'ASG2'],
  ['Asia', 'G2', 0, 'ASG3'],
  ['Asia', 'G1', 1, 'ASG4'],
  ['Asia', 'G3', 0, 'ASG5'],
  ['Asia', 'G3', 1, 'ASG6'],
  ['Asia', 'G5', 1, 'ASG7'],
  ['Asia', 'G5', 1, 'ASG8'],
  ['Africa', 'G1', 1, 'AFG1'],
  ['Africa', 'G1', 1, 'AFG2'],
  ['Africa', 'G2', 0, 'AFG3'],
  ['Africa', 'G3', 0, 'AFG4'],
  ['Africa', 'G2', 1, 'AFG5'],
  ['Africa', 'G2', 1, 'AFG6'],
  ['Africa', 'G3', 1, 'AFG7'],
  ['Africa', 'G2', 1, 'AFG8'],
  ['Africa', 'G6', 1, 'AFG9'],
  ['Africa', 'G6', 1, 'AFG10'],
  ['America', 'G1', 1, 'AMG1'],
  ['America', 'G1', 1, 'AMG2'],
  ['America', 'G1', 1, 'AMG3'],
  ['America', 'G2', 0, 'AMG4'],
  ['America', 'G2', 1, 'AMG5'],
  ['America', 'G2', 0, 'AMG6'],
  ['America', 'G3', 0, 'AMG7'],
  ['America', 'G3', 1, 'AMG8'],
  ['America', 'G3', 0, 'AMG9'],
  ['America', 'G3', 1, 'AMG10'],
  ['America', 'G8', 1, 'AMG11'],
  ['America', 'G8', 0, 'AMG12'],
  ['America', 'G8', 1, 'AMG13']
];

$('input[type=radio][name=options]').change(function() {
        if (this.value == 'Asia') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'Asia') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
        if (this.value == 'Africa') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'Africa') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
         else if (this.value == 'America') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'America') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="radio" name="options" value="Asia" />Asia</label>
  <label><input type="radio" name="options" value="Africa" />Africa</label>
  <label><input type="radio" name="options" value="America" />America</label>

</div>

<div class="multiselect">
  <label><input type="checkbox" name="gp" value="G1" />G 1</label>
  <label><input type="checkbox" name="gp" value="G2" />G 2</label>
  <label><input type="checkbox" name="gp" value="G3" />G 3</label>
  <label><input type="checkbox" name="gp" value="G4" />G 4</label>
  <label><input type="checkbox" name="gp" value="G5" />G 5</label>
  <label><input type="checkbox" name="gp" value="G6" />G 6</label>
  <label><input type="checkbox" name="gp" value="G8" />G 8</label>
</div>

<ul>
  
</ul>

Answer 1

您可以先根据大洲名称进行过滤。然后使用过滤数组，您可以通过首先将所有组存储在一个数组中然后根据该组过滤大陆来基于组进行过滤。然后生成列表。

var groups = [
  ['Asia', 'G1', 1, 'ASG1'],
  ['Asia', 'G1', 1, 'ASG2'],
  ['Asia', 'G2', 0, 'ASG3'],
  ['Asia', 'G1', 1, 'ASG4'],
  ['Asia', 'G3', 0, 'ASG5'],
  ['Asia', 'G3', 1, 'ASG6'],
  ['Asia', 'G5', 1, 'ASG7'],
  ['Asia', 'G5', 1, 'ASG8'],
  ['Africa', 'G1', 1, 'AFG1'],
  ['Africa', 'G1', 1, 'AFG2'],
  ['Africa', 'G2', 0, 'AFG3'],
  ['Africa', 'G3', 0, 'AFG4'],
  ['Africa', 'G2', 1, 'AFG5'],
  ['Africa', 'G2', 1, 'AFG6'],
  ['Africa', 'G3', 1, 'AFG7'],
  ['Africa', 'G2', 1, 'AFG8'],
  ['Africa', 'G6', 1, 'AFG9'],
  ['Africa', 'G6', 1, 'AFG10'],
  ['America', 'G1', 1, 'AMG1'],
  ['America', 'G1', 1, 'AMG2'],
  ['America', 'G1', 1, 'AMG3'],
  ['America', 'G2', 0, 'AMG4'],
  ['America', 'G2', 1, 'AMG5'],
  ['America', 'G2', 0, 'AMG6'],
  ['America', 'G3', 0, 'AMG7'],
  ['America', 'G3', 1, 'AMG8'],
  ['America', 'G3', 0, 'AMG9'],
  ['America', 'G3', 1, 'AMG10'],
  ['America', 'G8', 1, 'AMG11'],
  ['America', 'G8', 0, 'AMG12'],
  ['America', 'G8', 1, 'AMG13']
];

var continents = [];

$('input[type=radio][name=options]').change(function() {
  continents = groups.filter(a => a[0] === this.value) 
  var str = continents.map(a => `<li>${a[3]}</li>`).join('');
  $('ul').empty();
  $('ul').append(str);
  var unique = [...new Set(continents.map(a => a[1]))];
  
  $(".multiselect input[type=checkbox]").each(function(){
    $(this).attr('disabled', false);
    if(!unique.includes($(this).val())) {
      $(this).attr('disabled', true);
    }
  });
});

$(".multiselect input[type=checkbox]").on("change", function () {
  var groups = [];
  $(this).parent().parent().find('input[type=checkbox]').each(function(){
    if($(this).is(":checked")) {
      groups.push($(this).val());
    }
   });
  
  if(Array.isArray(continents) && continents.length) {
    var filteredGroup = continents.filter( a => groups.includes(a[1]));
    var str = filteredGroup.map(a => `<li>${a[3]}</li>`).join('');
    $('ul').empty();
    $('ul').append(str); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="radio" name="options" value="Asia" />Asia</label>
  <label><input type="radio" name="options" value="Africa" />Africa</label>
  <label><input type="radio" name="options" value="America" />America</label>

</div>

<div class="multiselect">
  <label><input type="checkbox" name="gp" value="G1" />G 1</label>
  <label><input type="checkbox" name="gp" value="G2" />G 2</label>
  <label><input type="checkbox" name="gp" value="G3" />G 3</label>
  <label><input type="checkbox" name="gp" value="G4" />G 4</label>
  <label><input type="checkbox" name="gp" value="G5" />G 5</label>
  <label><input type="checkbox" name="gp" value="G6" />G 6</label>
  <label><input type="checkbox" name="gp" value="G8" />G 8</label>
</div>

<ul>
  
</ul>