Dware Dware -4 years ago 56
CSS Question

Apply displayNone to certain class depending on selected field in other classes

I am trying to hide an element when a certain option value is selected from a fieldset drop down. I am unsure how to use jQuery to read the text contained in the option value (either the actual text or the value is fine):

<div class="filter_options">
<input id="search_query" type="hidden" value="Texts" />
<fieldset class="filterType">

<label>Filter By Type</label><select id="search_filter_type">

<option value="">All</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option></select></fieldset>

</div>


and then hide the certain div classes "pg_list" which do not contain the selected value.

<div class="pg_list">
<p>This text contains a Dog</p>
</div>

<div class="pg_list">
<p>This text contains a Cat</p>
</div>

<div class="pg_list">
<p>This text contains a Rabbit</p>
</div>


So If I choose option value - Cat, then it would hide the div containing Dog or Rabbit, and leave Cat.

Lastly, I have the following .css ready to go:

.displayNone{
display: none;
}


Hopefully this makes sense. Here is my jQuery for a input text field which works, but I can't work out how to use the same basis to work for a selected drop down:

$('input').on('keypress keyup', function(){
var value = $(this).val().toLowerCase();
if (value != '') {

$('.pg_list').each(function () {
if ($(this).text().toLowerCase().indexOf(value) > -1) {
$(this).removeClass('displayNone');
} else {
$(this).addClass('displayNone');
}
});
} else {
$('.pg_list').removeClass('displayNone');
}


});

Thank you for reading.

Answer Source

First, you need to select the correct component, which is the dropdown box: $('#search_filter_type'). Second, you want this to occur when the value of the dropdown box is changed: $('#search_filter_type').on('change', ...

$('#search_filter_type').on('change', function() {
  var value = $(this).find('option:selected').text().toLowerCase();
  if (value != '') {

    $('.pg_list').each(function() {
      if ($(this).text().toLowerCase().indexOf(value) > -1) {
        $(this).removeClass('displayNone');
      } else {
        $(this).addClass('displayNone');
      }
    });
  } else {
    $('.pg_list').removeClass('displayNone');
  }
});
.displayNone {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter_options">
  <input id="search_query" type="hidden" value="Texts" />
  <fieldset class="filterType">

    <label>Filter By Type</label>
    <select id="search_filter_type">

      <option value="">All</option>
      <option value="Cats">Cat Pictures</option>
      <option value="Dogs">Dog Pictures</option>
    </select>
  </fieldset>

</div>
<div class="pg_list">
  <p>This text contains a Dog Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Cat Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Rabbit</p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download