Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Making a dropdown show/hide depending on selection

    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?

    Code:
    <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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <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>
    Code:
    <select name='helpdesk-category' onchange="showSecond(this.value)" id='helpdesk-category' class='dropdown'  tabindex="40" >
    PS: untested!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •