Hide specific elements based on chosen options in different classes using the displayNone property

Question

Hide specific elements based on chosen options in different classes using the displayNone property

I need help with a jQuery script that can hide certain elements based on the selected option value from a drop-down menu. I want to be able to read the text content of the selected option value and then hide specific div classes accordingly:

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

The goal is to hide the div classes with the "pg_list" class that do not contain the selected value from the drop-down menu.

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

For example, if the user selects "Cat" from the drop-down menu, it should hide the div containing "Dog" or "Rabbit", leaving only the one containing "Cat".

I have already prepared the necessary CSS:

.displayNone{
    display: none;
}

Here is my existing jQuery code, which currently works for an input text field but needs modification to work with a selected drop-down value:

$('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 your assistance!

javascript jquery html css

Answer 1

Answer №1

To begin, you must make sure to choose the correct element, which in this case is the dropdown box identified by the code: $('#search_filter_type'). Next, you want this action to take place when there is a change in the value of the dropdown box:

$('#search_filter_type').on('change', ...

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

    $('.pg_list').each(function() {
      if ($(this).text().toLowerCase().indexOf(val) > -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>In this text, you will find Dog Pictures</p>
</div>

<div class="pg_list">
  <p>This text includes images of Cat Pictures</p>
</div>

<div class="pg_list">
  <p>There are references to a Rabbit in this text</p>
</div>

Answer 2

To begin, you must make sure to choose the correct element, which in this case is the dropdown box identified by the code: $('#search_filter_type'). Next, you want this action to take place when there is a change in the value of the dropdown box:

$('#search_filter_type').on('change', ...

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

    $('.pg_list').each(function() {
      if ($(this).text().toLowerCase().indexOf(val) > -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>In this text, you will find Dog Pictures</p>
</div>

<div class="pg_list">
  <p>This text includes images of Cat Pictures</p>
</div>

<div class="pg_list">
  <p>There are references to a Rabbit in this text</p>
</div>

Answer 3

Answer №2

When using jQuery to retrieve the value of a <select>, the process is similar to that of an <input>:

$('#my-select').val(); // replace 'my-select' with your select element

To trigger this action when the selection changes, you can utilize a change event:

$('#my-select').on('change', function() {
    var value = $(this).val().toLowerCase();
    // continue with your code here
});

If you wish to access the text of the selected option instead, you can use the following approach:

$('#my-select').on('change', function() {
    var value = $(this).find('option:selected').text();
    // continue with your code here
});

An enhancement for your design could involve adding a specific class to each <div> element, corresponding to the option value. By doing so, you can easily manipulate their visibility without extensive looping by leveraging the not() method.

$('select').on('change', function () {
  var value = $(this).val();
  $('#divs').children() // all children within the designated parent
    .removeClass('displayNone') // remove 'displayNone' class from all elements
    .not('.' + value) // exclude the element we want visible
    .addClass('displayNone'); // add 'displayNone' class to remaining elements
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">-- Select --</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="rabbit">Rabbit</option>
</select>
<div id="divs">
  <div class="cat">Cat</div>
  <div class="dog">Dog</div>
  <div class="rabbit">Rabbit</div>
</div>

This approach offers more flexibility as it does not rely solely on matching text and eliminates the need for comparing texts through loops.

Answer 4

When using jQuery to retrieve the value of a <select>, the process is similar to that of an <input>:

$('#my-select').val(); // replace 'my-select' with your select element

To trigger this action when the selection changes, you can utilize a change event:

$('#my-select').on('change', function() {
    var value = $(this).val().toLowerCase();
    // continue with your code here
});

If you wish to access the text of the selected option instead, you can use the following approach:

$('#my-select').on('change', function() {
    var value = $(this).find('option:selected').text();
    // continue with your code here
});

An enhancement for your design could involve adding a specific class to each <div> element, corresponding to the option value. By doing so, you can easily manipulate their visibility without extensive looping by leveraging the not() method.

$('select').on('change', function () {
  var value = $(this).val();
  $('#divs').children() // all children within the designated parent
    .removeClass('displayNone') // remove 'displayNone' class from all elements
    .not('.' + value) // exclude the element we want visible
    .addClass('displayNone'); // add 'displayNone' class to remaining elements
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">-- Select --</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="rabbit">Rabbit</option>
</select>
<div id="divs">
  <div class="cat">Cat</div>
  <div class="dog">Dog</div>
  <div class="rabbit">Rabbit</div>
</div>

This approach offers more flexibility as it does not rely solely on matching text and eliminates the need for comparing texts through loops.

Hide specific elements based on chosen options in different classes using the displayNone property

Answer №1

Answer №2

Similar questions

I'm struggling to interpret the reply received from $.ajax

What is the best way to verify a password's strength with Joi so that it includes 2 numbers, 2 special characters, 2 uppercase letters, and 2 lowercase letters?

I must retrieve cookies from the GET call API within the route.js file

Unraveling the intricacies of Wordpress, PHP, and HTML

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

What could be causing my header component to rerender even when there are no new props being received?

Adding an attribute to the last item of an Angular / NGX Bootstrap component

Building a linked list in Javascript with pointers

Tips for enabling the `ignoreUndefinedProperties` feature in Node.js

PHP script failing to execute if/else statement during AJAX request

Tips for limiting a website to load exclusively within an iframe

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

The componentWillUnmount method is not being called

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

Challenges encountered when attempting to download a file using jQuery's GET method

Tips for retrieving keycodes/key/which values for DOMSubtreeModified Event

Incorporate an onclick event to the elements within the array

Tips for sending JSON-formatted data from a route to jQuery

Sophisticated Sidebar Design using Bootstrap 5

Achieving decimal increments in Bootstrap Slider on a View Page