Question

我正在疯狂地试图解决这个问题......

我想要两个下拉框，用于在单击选项时显示/隐藏文本。我把这部分放下了。

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

你必须添加＆＃34; c1 .. s1 ...＆＃34; class（或data-attr），你可以放弃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

Answer 2

我会丢弃ID并只使用数据属性。然后动态构建选择器。请注意行div和新showHide()函数的不同定义。

＆＃13;

$().ready(function() {
  $('.selectSome').on('change', function() {
    showHide();
  });
});

function showHide() {
  // hide all rows
  $('.row').hide();
  // show good rows only
  var cat = $('#select_category').val();
  var sub = $('#select_subject').val();
  var selector = "[class='row']";
  if (cat !== 'null') {
    selector += "[data-category='" + cat + "']";
  }
  if (sub !== 'null') {
    selector += "[data-subject='" + sub + "']";
  }
  $(selector).show();
}

＆＃13;

.row {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="select_class">Class:
  <select id="select_category" class="selectSome">
    <option value="null">Please select...</option>
    <option value="c1">Class 1</option>
    <option value="c2">Class 2</option>
    <option value="c3">Class 3</option>
  </select>
</label>
<br/>
<label for="select_subject">Subject:
  <select id="select_subject" class="selectSome">
    <option value="null">Please select...</option>
    <option value="s1">Subject 1</option>
    <option value="s2">Subject 2</option>
    <option value="s3">Subject 3</option>
  </select>
</label>
<hr/>
<div class="row" data-subject="s1" data-category="c1">
  Subject 1 for Class 1
</div>
<div class="row" data-subject="s2" data-category="c1">
  Subject 2 for Class 1
</div>
<div class="row" data-subject="s1" data-category="c2">
  Subject 1 for Class 2
</div>
<div class="row" data-subject="s2" data-category="c2">
  Subject 2 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c2">
  Subject 3 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c3">
  Subject 3 for Class 3
</div>

＆＃13;

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

2 个答案: