JSFiddle - React, Tailwind, and code Playground

by endel

HTML

<h2>with select</h2>
<select name="first" data-filter-visible="test">
<option value="">select one</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="alone">4</option>
</select>

<div data-test="one">One!</div>
<div data-test="one two">Two!</div>
<div data-test="one two three">Three!</div>
<div data-test="alone">#foreveralone</div>


<h2>with radio</h2>

<input type="radio" name="second" data-filter-visible="test2" value="one" /> 1
<input type="radio" name="second" data-filter-visible="test2" value="two" /> 2
<input type="radio" name="second" data-filter-visible="test2" value="three" /> 3
<input type="radio" name="second" data-filter-visible="test2" value="alone" /> 4

<div data-test2="one">One!</div>
<div data-test2="one two">Two!</div>
<div data-test2="one two three">Three!</div>
<div data-test2="alone">#foreveralone</div>

CSS

h2 { margin-top: 12px; }

JavaScript

$(function() {
  //
  // Enable visibility filters based on field values
  //
  $('[data-filter-visible]').change(function() {
    var val = $(this).val();

    if ($(this).attr('type') == 'radio') {
      // Invalidate radio buttons that isn't checked
      if ($(this).attr('checked')!="checked") {
        val = "";
      }
    }

    $('[data-' + $(this).data('filter-visible') + ']').hide();
    $('[data-' + $(this).data('filter-visible') + '~='+val+']').show();
  });
  $('[data-filter-visible]').change();
});