jQuery methods works simple:
show() just adding css-property display: block
hide() just adding css-propery display: none
So you should just add style="display: none;" to your selects
Fiddle: https://jsfiddle.net/kodxg0y8/
<!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>
$(document).ready(function() {
$('#exampleFruit').change(function() {
var val = $('#exampleFruit').val();
$('.exampleSubselect').hide();
if(val) {
$('#example'+val).show();
}
});
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
