Javascript 如何从两个select选项中筛选出div？

你可以使用和

---

我强烈建议在选项中使用

values

html属性而不是文本本身，否则select的值将是所选文本（不是很有用）。 再解释一下你是如何构建你的页面的，可能会很棒，这样我们就不必通读整个代码并试图理解它的功能和构建方式：我们应该显示什么？什么时候

关于您的问题（一般结构）：

HTML:

JS:

---

你能通过一个例子解释一下你想过滤掉哪个div吗？我不想让行被隐藏……我想让它在@Sylordis可见。我希望我的小提琴能很好地演奏

$('select#classes').on('change', function() {
    var classSearch = $(this).val();
    $('.col-sm-6:not(:contains(' + classSearch + '))').hide();

    $('select#subjects').on('change', function() {
        var subjectsSearch = $(this).val();
        $('.col-sm-6:contains(' + classSearch + '))').show();    
        $('.col-sm-6:not(:contains(' + subjectsSearch + '))').hide();
    });

});

$('select#classes').on('change', function() {
    var classSearch = $(this).val();
$('.col-sm-6 *').not('.' + classSearch).hide();

 $('select#subjects').on('change', function() {
    var subjectsSearch = $(this).val();
    $('.'+classSearch).parents('.col-sm-6').show(); 
    $('.col-sm-6 *').not('.' + subjectsSearch).hide();
  });
});

<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" id="row_s1_c1">Subject 1 for Class 1</div>
<div class="row" id="row_s2_c1">Subject 2 for Class 1</div>
<div class="row" id="row_s1_c2">Subject 1 for Class 2</div>
<div class="row" id="row_s2_c2">Subject 2 for Class 2</div>
<div class="row" id="row_s3_c2">Subject 3 for Class 2</div>
<div class="row" id="row_s3_c3">Subject 3 for Class 3</div>

.row {
  display: none;
}

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