JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <select>
      <option> Choose any value </option>
      <option value = "first"> first </option>
      <option value = "second"> second </option>
      <option value = "third"> third </option>
      <option value = "fourth"> fourth </option> 
   </select>

   <div id = "first" style = "display:none"> <p> first </p> </div>
   <div id = "second" style = "display:none"> <p> second </p> </div>
   <div id = "third" style = "display:none"> <p> third </p> </div>
   <div id = "fourth" style = "display:none"> <p> fourth </p> </div>

JavaScript

$(document).ready(function () {
         $('select').on('change', function () {
            var value = $(this).val();
            $('div').each(function () {
               $(this).hide();
            });
            $('#' + value).show();
         });
      });