如何从两个选择选项中滤除div? [英] How can I filter out a div from two select options?

问题描述

这是我对示例的小提琴

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

});

推荐答案

我强烈建议使用values html属性而不是文本本身作为选项，否则select的值将是选定的文本(不是非常大).有用). 关于如何构造页面的一些解释可能很棒，因此我们不必遍历整个代码并试图了解它的功能和构建方式:我们应该显示什么?什么时候?

I strongly suggest the use of values html attribute instead of the text itself for options, otherwise the value of the select will be the selected text (not very useful). And a little explanation of how you structured your page could have been great, so we wouldn't have to go through the whole code and try to understand what it does and how it is built: what should we display ? when ?

关于您的问题(具有一般结构):

About your problem (with a general structure):

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/

这篇关于如何从两个选择选项中滤除div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！