JSFiddle - React, Tailwind, and code Playground
HTML
<form class="form-horizontal well" method="post" action="/cgi-bin/dropdown.py">
<fieldset>
<legend>Select Audit Point</legend>
<div class="control-group">
<label class="control-label" for="select01">Select Tier</label>
<div class="controls">
<select id="select01" name="select01">
<option value="All Tier">All Tiers</option>
<option value="Database Tier">Database Tier</option>
<option value="Application Tier">Application Tier</option>
<option value="Web Tier">Web Tier</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">Select Version</label>
<div class="controls">
<select id="select02" name="select02">
<option value="Oracle" name="Oracle">Oracle</option>
<option value="SQL" name="SQL">SQL</option>
<option value="Both" name="Both">Both</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">Select Audit Point</label>
<div class="controls">
<select id="select03" name="select03">
<option class="All Tiers" value="Eagle Software Version">Eagle Software Version</option>
<option class="All Tiers" value="Server OS, Memory, CPU">Server OS, Memory, CPU</option>
<option class="All Tiers" value="High Availability">High Availability</option>
<option class="Database Tier" value="DBMS Version">DBMS Version</option>
<option class="Database Tier" value="DBMS Statistics">DBMS Statistics</option>
<option class="Database Tier" value="DBMS Parameters">DBMS Parameters</option>
<option class="Database Tier" value="DBMS Data File Growth">DBMS Data File Growth</option>
<option class="Database Tier" value="Database Disk Structure">Database Disk...
JavaScript
var savedOptions = '';
savedOptions = $('#select03').html(); //save the second dropdown-list
$('#select01').change(function() {
var selectedValue = $('#select01').val(); //After changing the value of the first dropdown, store this value inside a variable
$('#select03').html(savedOptions); //restore the content of the 2nd dropdown
$('#select03').children('option').each(function() {
if(!$(this).hasClass(selectedValue)) {
$(this).remove(); //Compare and step through the 2nd dropdown and delete all unneccessary options
}
});
});