JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table>
<tr>
<th>
<label for="id_application">Application:</label>
</th>
<td>
<select name="application" id="id_application">
<option value="">Make a selection</option>
<option value="a">Aerial</option>
<option value="b">Ground</option>
<option value="c">Orchard/Airblast</option>
</select>
</td>
</tr>
<tr>
<th>
<label for="id_boom_height">Boom height:</label>
</th>
<td>
<select name="boom_height" id="id_boom_height">
<option value="">Make a selection</option>
<option value="1">Low</option>
<option value="2">High</option>
</select>
</td>
</tr>
<tr>
<th>
<label for="id_orchard_type">Orchard type:</label>
</th>
<td>
<select name="orchard_type" id="id_orchard_type">
<option value="">Make a selection</option>
<option value="1">Vineyard in leaf</option>
<option value="2">Orchard or dormant vineyard</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
JavaScript
$(document).ready(function () {
$('#id_boom_height').closest('tr').hide();
$('#id_orchard_type').closest('tr').hide();
$('#id_application').change(function () {
$('#id_boom_height').closest('tr').hide();
$('#id_orchard_type').closest('tr').hide();
if ($(this).val() == "b") {
$('#id_boom_height').closest('tr').show();
$('#id_orchard_type').closest('tr').hide();
} else if ($(this).val() == "a") {
$('#id_boom_height').closest('tr').hide();
$('#id_orchard_type').closest('tr').hide();
} else if ($(this).val() == "c") {
$('#id_boom_height').closest('tr').hide();
$('#id_orchard_type').closest('tr').show();
}
});
});
$(window).bind('beforeunload', function () {
$(":reset").click();
});