There are two radio buttons, Maintenance and IT, and a drop down menu under those. When either of those buttons is chosen, the drop down selections change to appropriate choices, i.e Maintenance gives the option of AC Issues, Plumbing, Roof Leak and IT gives the option of Email, Internet, Printer. The Maintenance div is shown by default (there are far more maintenance requests) and the IT div is hidden, positioned "on top" of the Maintenance div. The radio button toggles which div is hidden (plus I have a small bit of code, SelectedIndex, that resets both menus to blank if they choose another type of work).
header <script> is here:
Code: Select all
function toggleSelect(id)
{
if (id == 'off')
{
document.getElementById('maintworktype').style['display'] = 'none';
document.getElementById('itworktype').style['display'] = 'block';
document.getElementById('maintWork').selectedIndex = 0;
}
if (id == 'on')
{
document.getElementById('itworktype').style['display'] = 'none';
document.getElementById('maintworktype').style['display'] = 'block';
document.getElementById('itWork').selectedIndex = 0;
}
}
Code: Select all
<div id="radio-type"><br>
<input type="radio" name="serviceType" value="Maintenance request" checked onclick="toggleSelect('on');">Maintenance <br />
<input type="radio" name="serviceType" value="IT request" onclick="toggleSelect('off');">IT <br />
</div>
Code: Select all
<div id="maintworktype"><strong> Work Type </strong>
<select name="maintWork">
<option value="" style="display:none;"></option>
<option value="AC">AC</option>
<option value="Plumbing">Plumbing</option>
<option value="RoofLeak">Roof Leak</option>
</div>
<div id="itworktype"><strong> Work Type </strong>
<select name="itWork">
<option value="" style="display:none;"></option>
<option value="Email">Email</option>
<option value="Internet">Internet</option>
<option value="Printer">Printer</option>
</div>