Javascript show hide divs onchange select menu

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
REwingUK
Forum Commoner
Posts: 26
Joined: Wed Jul 29, 2009 8:46 pm

Javascript show hide divs onchange select menu

Post by REwingUK »

Code: Select all

<script type="text/javascript">
function showstuff(element){
	if(document.getElementById(element).style.display = 'block')
		  {
			document.getElementById(have).style.visibility="block";
			document.getElementById(look).style.visibility="none";
		  }
	else if(document.getElementById(element).style.visibility = 'block')
		  {
			document.getElementById(look).style.visibility="block";
			document.getElementById(have).style.visibility="none";
		  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

Can anyone tell me what i need to change to get this to work. Thanks!
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Javascript show hide divs onchange select menu

Post by Christopher »

Code: Select all

<html>
<head>
<script type="text/javascript">
function showstuff(value){
    document.getElementById("have").style.display = (value == "have") ? "block" : "none";
    document.getElementById("look").style.display = (value == "look") ? "block" : "none";
}
</script>
</head>
<body>
<select id="changer" name="type" onchange="showstuff(this.value);">
          <option value="have">Have</option>
          <option value="look">Look</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div></body>
</html>
(#10850)
Post Reply