Question

I’ve seen similar solutions here but they are too specific. My case requires a more general approach to the solution. Basically something that can be reused regardless of the classes used in the displaying DIVs.

Side note: I’m not too good a jQuery or JavaScript, working on it.

My HTML code

<select name="business-law" id="business-law" class="filter">
  <option value="view-all">&mdash; View All</option>
  <option value="firm-name">Firm name 1</option>
  <option value="other-firm">Firm name 2</option>
  <option value="another-one">Firm name 3</option>
  <option value="final-firm-name">Firm name 4</option>
</select>

<div class="firm-name">Author 1 info</div>
<div class="firm-name">Author 2 info</div>
<div class="other-firm">Author 3 info</div>
<div class="another-one">Author 4 info</div>
<div class="final-firm-name">Author 5 info</div>
<div class="final-firm-name">Author 6 info</div>

My case

I’m building a page that lists law firm authors. There are many authors in the list, and many of them belong to the same law firm.

My problem

Since the page can have a lot of authors, I need to implement a ‘filter’ feature. The filter will filter by firm. So the visitor selects one of the firms from the select menu, and only the authors that work for that firm should be displayed. The others should hide.

There’s also a ‘View All’ option, this obviously, will show every author on the page. This is the default option.

My question

Any idea how to accomplish this with code that’s reusable in similar cases? (Maybe to filter countries, or languages, or fruits, you know what I mean).

While looking at other solutions here, I found this one, but it’s too specific to his case. It’s also a little over my head so I don’t know how to adapt it to this case.

Thanks in advance.

Answer 1

Other solutions are correct-ish, but they leave out the “view all”:

$('#business-law').on('change', function() {
    if ($(this).val() == 'view-all') {
        $('div').show();
    } else {
        $('div').hide();
        $('.' + $(this).val()).show();
    }
});