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:

<labelfor="select_class">Class:
  <selectid="select_category"class="selectSome"><optionvalue="null">Please select...</option><optionvalue="c1">Class 1</option><optionvalue="c2">Class 2</option><optionvalue="c3">Class 3</option></select></label><br/><labelfor="select_subject">Subject: 
  <selectid="select_subject"class="selectSome"><optionvalue="null">Please select...</option><optionvalue="s1">Subject 1</option><optionvalue="s2">Subject 2</option><optionvalue="s3">Subject 3</option></select></label><hr/><divclass="row"id="row_s1_c1">Subject 1 for Class 1</div><divclass="row"id="row_s2_c1">Subject 2 for Class 1</div><divclass="row"id="row_s1_c2">Subject 1 for Class 2</div><divclass="row"id="row_s2_c2">Subject 2 for Class 2</div><divclass="row"id="row_s3_c2">Subject 3 for Class 2</div><divclass="row"id="row_s3_c3">Subject 3 for Class 3</div>

CSS:

.row {
  display: none;
}

JS:

$().ready(function() {
  $('.selectSome').on('change', function() {
    showHide();
  });
});

functionshowHide() {
  // hide all rows
  $('.row').hide();
  // show good row onlyif ($('#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();
  });
});