How Can I Filter Out A Div From Two Select Options?

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

Solution 1:

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/

Solution 2:

You can do it using parents and 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();
  });
});