Question

Here is my Fiddle to the example

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

});

Answer 1

我强烈建议使用values html属性而不是文本本身作为选项，否则select的值将是所选文本（不是很有用）。关于你如何构建页面的一些解释可能很棒，所以我们不必完成整个代码并尝试理解它的作用以及它是如何构建的：我们应该展示什么？什么时候？

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

HTML：

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

CSS：

.row {
  display: none;
}

JS：

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

http://jsfiddle.net/g5cryt31/

Answer 2

您可以使用parents和not

来完成此操作

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

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

2 个答案: