JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
   <option value="red" selected="selected">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors"> red... </div>
<div id="yellow" class="colors"> yellow.. </div>
<div id="blue" class="colors"> blue.. </div>

JavaScript

$(document).ready(function(){

$('#colorselector option').each(function() {
      if ( this.selected == 'red')
      {
        $("#red").show();
        $("#yellow").hide();
        $("#blue").hide();
      }
      
       //If yellow is selected, show yellow, hide red and blue.
      if ( this.value == 'yellow')
      {
        $("#red").hide();
        $("#yellow").show();
        $("#blue").hide();
      }
      
      //If blue is selected, show blue hide red and yellow.
      if ( this.value == 'blue')
      {
        $("#red").hide();
        $("#yellow").hide();
        $("#blue").show();
      }
});
});