Page 1 of 1

Javascript show hide divs onchange select menu

Posted: Wed Mar 16, 2011 4:32 pm
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!

Re: Javascript show hide divs onchange select menu

Posted: Thu Mar 17, 2011 1:52 am
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>