javascript - 如何从两个选择选项中过滤文本/div？

Question

我快把自己逼疯了，想弄明白...

我想要两个下拉框，它们可以在单击选项时显示/隐藏文本。我把这部分记下来了。

https://jsfiddle.net/n1Lcfm36/

$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
    if($(this).attr("value")=="red"){
        $(".box").not(".red").hide();
        $(".red").show();
    }
    else if($(this).attr("value")=="green"){
        $(".box").not(".green").hide();
        $(".green").show();
    }
    else if($(this).attr("value")=="blue"){
        $(".box").not(".blue").hide();
        $(".blue").show();
         }
         else{
             $(".box").hide();
         }
     });
 }).change();
 });

当两个盒子一起使用时，我希望它的过滤方式类似于此处的方式:http://jsfiddle.net/g5cryt31/

$().ready(function() {
    $('.selectSome').on('change', function() {
    showHide();
    });
});

function showHide() {
    // hide all rows
    $('.row').hide();
    // show good row only
    if ($('#select_category').val() != 'null' && $('#select_subject').val() != 'null') {
        $('#row_' + $('#select_subject').val() + '_' +     $('#select_category').val()).show();
    }
}

除此之外，当您尝试一次查看一个框时什么也没有发生。它们都需要用于过滤...

因此，第一个框“Class”一开始不会显示任何内容。然后，您从下拉列表中选择一个类，相关类将显示在下方。

第二个框，“主题”一开始什么也不会显示。然后，您从下拉列表中选择一个主题，相关主题将显示在下方。

但是当两者一起使用时(我想这需要一个提交按钮？)它们会过滤掉，类似于我发布的第二个 jsfiddle。

Answer 1

我想我明白你想要什么，如果我错了请纠正我-

这将显示有关 X 类或 Y 类的所有元素。如果它们被一起挑选，它将只显示 X + Y。

这会做你想做的事:

$().ready(function() {
    $('.selectSome').on('change', function() {
        showHide();
    });
});

function showHide() {
  // hide all rows
  $('.row').hide();
  // show good row only
  if ($('#select_category').val()!= 'null'){
    //class selected - check if subject seleceted
    if ($('#select_subject').val() != 'null'){
    //class and subject selected use double selector
      $('.' + $('#select_subject').val()+'.'+$('#select_category').val()).show();
    }
    else {
      //only class selected - use category selector    
      $('.' + $('#select_category').val()).show();
    }
  } 
  else
  if ($('#select_subject').val() != 'null'){
    //only subject selected without class
    $('.' + $('#select_subject').val()).show();
  }
}

您将必须添加“c1.. s1...”类(或数据属性)并且您可以丢失 id 的

行的新 html:

<div class="row s1 c1">
  Subject 1 for Class 1
</div>
<div class="row s2 c1">
  Subject 2 for Class 1
</div>
<div class="row s1 c2">
  Subject 1 for Class 2
</div>
<div class="row s2 c2">
  Subject 2 for Class 2
</div>
<div class="row s3 c2">
  Subject 3 for Class 2
</div>
<div class="row s3 c3">
  Subject 3 for Class 3
</div>

Fiddle