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>
<tr id="table1">
 <select id="exampleFruit">
    <option value="">-- Please Select --</option>
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
</select>
</tr>

<tr id="table2">
<select id="exampleApple" class="exampleSubselect" style="display: none;">
    <option>Red Delicious</option>
    <option>Granny Smith</option>
    <option>Cox's Orange Pippin</option>
</select>
</tr>
<tr id="table3">
<select id="exampleBanana" class="exampleSubselect" style="display: none;">
    <option>Plantain</option>
    <option>Burro</option>
    <option>Cavendish</option>
</select>
</tr>
<tr id="table4">
<select id="exampleOrange" class="exampleSubselect" style="display: none;">
    <option>Blood</option>
    <option>Navel</option>
    <option>Valencia</option>
</select>
</tr>
</body>
</html>

JavaScript

$(document).ready(function() {
    $('#exampleFruit').change(function() {
        var val = $('#exampleFruit').val();
        $('.exampleSubselect').hide();
        if(val) {
            $('#example'+val).show();
        }
		
    });
});