JSFiddle - React, Tailwind, and code Playground

by wj_fiddle_playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fruit Change</title>
</head>

<body>
<table class = "tableClass">
  <tr id = "tablerow_1">
    <select id = "changeId">
    <option value="">-- Please Select --</option>
	<option value="appleValue">Apple</option>
    <option value="bananaValue">Banana</option>  
    <option value="orangeValue">Orange</option>  
	
</select>
  </tr>
  
  <tr id = "tablerow_2">
    <select id = "appleValue" >
     <option value="1">Red Delicious</option>
    <option value="2">Granny Smith</option>   
    </select>
  </tr>
  
  <tr id="tablerow_3">
    <select id = "bananaValue">
      <option value="1">Plantain</option>
      <option value="2">Dancing Banana</option>
    </select>
  </tr>
  
  <tr id = "tablerow_4">
	<select id = "orangeValue" >
    <option>Blood</option>
    <option>Navel</option>
    <option>Florida</option>
</select>

</tr>
</table>
</body>
</html>

JavaScript

$(document).ready(function(){
    $("#changeId").change(function(){
      var optionValue = $(this).val();

	  $('.tableClass tr[id="tablerow_2"]').hide();
      if(optionValue){
        $(`#${optionValue}`).show();
      }
    }).change();
});