...

View Full Version : Making a dropdown show/hide depending on selection



Gardy
01-10-2011, 12:36 PM
Hey all,

I'm new to all of this so just wondering if someone could help me with a function?

I have the following code that generates two dropdown boxes in a form, but I would like for the second to be hidden unless the first has 'Software problem' selected. Is it possible to do this?


<p id="parent-menu">
<select name='helpdesk-category' id='helpdesk-category' class='dropdown' tabindex="40">
<option value='-1'>Select a Category</option>
<option class="level-0" value="13">Software problem</option>
<option class="level-0" value="14">Hardware problem</option>
<option class="level-0" value="15">Suggestion</option>
<option class="level-0" value="16">General query</option>
</select>
</p>
<p id="toggle-menu">
<select name='software-category' id='software-category' class='dropdown' tabindex="50">
<option value='-1'>Select a Program</option>
<option class="level-0" value="6">BigHand</option>
<option class="level-0" value="7">IRIS</option>
<option class="level-0" value="8">MS Outlook</option>
<option class="level-0" value="9">MS Word</option>
<option class="level-0" value="10">MS Excel</option>
<option class="level-0" value="11">Oyez</option>
<option class="level-0" value="12">Internet Explorer</option>
</select>
</p>

Thanks,
David

abduraooft
01-10-2011, 12:58 PM
<script type="text/javascript">
window.oload=function(){
document.getElementById('software-category').style.visibility='hidden';
}
function showSecond(value){
if(value=='level-0')
document.getElementById('software-category').style.visibility='visible';
else
document.getElementById('software-category').style.visibility='hidden';
}
</script>

<select name='helpdesk-category' onchange="showSecond(this.value)" id='helpdesk-category' class='dropdown' tabindex="40" >


PS: untested!

Gardy
01-10-2011, 02:12 PM
One slight typo, and I changed the CSS that is used so that the page looks a bit better, but works a charm.

Thanks for your help.

Thanks,
David


<script type="text/javascript">
window.onload=function(){
document.getElementById('software-category').style.display='none';
}

function showSecond(value){
if(value=='13')
document.getElementById('software-category').style.display='inline';
else
document.getElementById('software-category').style.display='none';
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum