如何从数组中实现两级过滤数据？

Question

我正在处理以下代码。如何根据First，Radio选择然后通过复选框选择更新/过滤groups列表？

正如你所看到我能够通过无线电过滤列表（不知道如何使代码更短而不是使用3 if子句？）但我不知道如何运行第二部分（复选框）特别是一些它们不适用于无线电

＆＃13;

＆＃13;

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>');
           }
          }
        }
    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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); 
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;