JSFiddle - React, Tailwind, and code Playground

by gurvinder372

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p align="center"><font face="futura" size="20px">Pick your workout here:</font>
</p>
<div align="center">
  <select style="font-size:20px" class="filterby" data-type='filterbyWeek'>
    <option value="">
      <h5>Select Week</h5>
    </option>
    <option value="1">
      <h5>Week 1</h5>
    </option>
    <option value="2">
      <h5>Week 2</h5>
    </option>
    <option value="3">
      <h5>Week 3</h5>
    </option>
    <option value="4">
      <h5>Week 4</h5>
    </option>
  </select>

  <select style="font-size:20px" class="filterby" data-type='filterbyWorkout'>
    <option value="">
      <h5>Select Workout</h5>
    </option>
    <option value="sw1">
      <h5>Strength Workout #1</h5>
    </option>
    <option value="sw2">
      <h5>Strength Workout #2</h5>
    </option>
    <option value="cw1">
      <h5>Conditioning Workout #3</h5>
    </option>
    <option value="cw2">
      <h5>Conditioning Workout #4</h5>
    </option>
    <option value="rw">
      <h5>Recovery Workout</h5>
    </option>
  </select>
</div>
<div id="FilterContainer">
  <ul>
    <li class=" all 1 sw1" style="list-style:none; display:none">saasasasa
     
</li>
</ul>
</div>

JavaScript

$('select').change(function() {
  
  	var filterbyWeekSelection = $.trim( $( "select[data-type='filterbyWeek']" ).val() );
  	var filterbyWorkoutSelection = $.trim( $( "select[data-type='filterbyWorkout']" ).val() );
  
   //$('#FilterContainer').find('li.all.' + current).show();
    //var current = this.value;

   if (filterbyWeekSelection.length == 0 || filterbyWorkoutSelection || 0 )  {
      $('#FilterContainer').find('li.all').show();
    } 
  else 
  {
      $('#FilterContainer').find('li.' + filterbyWeekSelection + "." + filterbyWorkoutSelection).show();
  }

    return false;
  });