Hidden Dropdown
The selection of the first dropdown determines which second dropdown populates
HTML
<table style="border:2px solid #006633" bgcolor="#CCBFA3"; id="my_table">
<tr>
<td>
<input type="checkbox" name="ord_31" id="orderId_31" value="true" /> Furosemide (Lasix) 40 milligram
<select name="cprompt_31_1" id="cprompt_31_1">
<option value="ORAL">orally</option>
<option value="IV">intravenously</option>
</select>
<select name="cprompt_31_2" id="cprompt_31_2">
<option value="Q12H">Q12H</option>
<option value="QDAY">QDAY</option>
<option value="Q6H">Q6H</option>
<option value="Q8H">Q8H</option>
<option value="BID">BID</option>
</select>
<select name="cprompt_31_3" id="cprompt_31_3" class="hide">
<option value="ONCE">ONCE</option>
</select>
</td>
</tr>
</table>
CSS
body{
background-color:#D1D1D1;
font-size: 62.5%;
margin: 30px;
}
td{
text-align:left;
font-family: Tahoma, Verdana, sans serif;
font-size: 10pt;
vertical-align:top;
}
td.checked { background: yellow; }
select.hide{ display:none; }
JavaScript
// Lasix Frequency Selection
$(function() {
$("select#cprompt_31_1").change(function() {
if ($('select#cprompt_31_1 option:selected').val() == "ORAL") {
$("select#cprompt_31_2").removeClass("hide");
$("select#cprompt_31_3").addClass("hide");
} else {
$("select#cprompt_31_2").addClass("hide");
$("select#cprompt_31_3").removeClass("hide");
}
});
});
$("input:checkbox").click(function() { $(this).parent("td").toggleClass("checked");
});