jquery show/hide multiple elements based on data attribute

Question

Hi I'm using jQuery to filter a list of elements that are on a page using a HTML select which has a list of client IDS. The HTML elements on the page have a data attribute of data-client. I'm using jquery to filter out the ones that do not match. However the code I have is hiding all elements. My code is below;

<select class="form-control placeholder" id="filterSelect" name="clients">
  <option value="14">Client 14</option>
  <option value="45">Client 45</option>
  <option value="48">Client 48</option>
</select>

<div class="filterable">
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="45">
    <h3>Hello World</h3>
    <h4>Client 45</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
</div>

My jquery is as follows;

$('#filterSelect').change(function() {
  var optionSelected = $("option:selected", this).val();
  var filter = $('.filter');

  if (filter.attr('data-client') != optionSelected) {
    filter.hide();
  }

});

I also have a jsfiddle;

https://jsfiddle.net/to53jbe5/

Hope someone can help me filter out the ones that do not match the selected value of the select.

Rayon · Accepted Answer · 2016-02-28 03:09:32Z

8

Use [data-client="YOUR_VALUE"] to select elements with attributes. $('.filter[data-client="' + optionSelected + '"]') will select all the elements having class as filter and attribute data-client as selected value.[Reference]

.change() will trigger change event initially to filter selected value elements

Try this:

$('#filterSelect').change(function() {
  var optionSelected = $("option:selected", this).val();
  $('.filter').hide();
  $('.filter[data-client="' + optionSelected + '"]').show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control placeholder" id="filterSelect" name="clients">
  <option value="14">Client 14</option>
  <option value="45">Client 45</option>
  <option value="48">Client 48</option>
</select>

<div class="filterable">
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="45">
    <h3>Hello World</h3>
    <h4>Client 45</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
</div>

Fiddle here

edited Feb 28, 2016 at 3:09

answered Feb 28, 2016 at 3:03

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anupam Mistry Over a year ago

I want the same answer but using jQuery ajax

Collectives™ on Stack Overflow

jquery show/hide multiple elements based on data attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related