JSFiddle - React, Tailwind, and code Playground

by wj_fiddle_playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements</title>

</head>
<body>
<table>
  <tr id="table 1">
    <select id="exampleFruit">
      <option value="">-- Please Select --</option>
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Orange</option>
    </select>
  </tr>

  <tr id="table 2">
    <select id="option1Banana" class="exampleSubselect" style="display: none;">
      <option value="1">Plantain</option>
      <option value="2">Burro</option>
      <option value="3">Cavendish</option>
    </select>
  </tr>
  <tr id="table 3">
    <select id="option2Apple" class="exampleSubselect" style="display: none;">
     <option value="1">Red Delicious</option>
      <option value="2">Granny Smith</option>
      <option value="3">Cox's Orange Pippin</option>
    </select>
  </tr>
  <tr id="table 4">
    <select id="option3Orange" class="exampleSubselect" style="display: none;">
      <option value="1">Blood</option>
      <option value="2">Navel</option>
      <option value="3">>Valencia</option>
    </select>
  </tr>
</table>
</body>
</html>

JavaScript

$(document).ready(function(){
    $("#exampleFruit").change(function(){
      var optionValue = $(this).val();
      $('.exampleSubselect').hide();
      if(optionValue){
        $(`#${optionValue}`).show();
      }
    }).change();
});