Hide and Unhide a div with a selectbox

**ramli66** · 02-04-2007, 05:20 PM

I want to unhide a div depending on the value of a selectbox option value

HTML Code:

<script type="text/javascript" language="JavaScript" src="subform.js"></script>

<form name='template'>
<select name='choise' onchange="javascript:ShowContent('value of option')">
<option value="uniquename">uniquename</option>
</select>
</form>

----------- This is the way it does work only this is a link.
<a 
   onmouseover="ShowContent('uniquename'); return true;"
   href="javascript:ShowContent('uniquename')">
[show]
</a>

----------------

<div 
   id="uniquename" 
   style="display:none; 
      left:200px; 
      top:100px; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">

Content goes here.

</div>

code in subform.js:

HTML Code:

function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

as you can see i got some of the work done

. However i dont know how to read the value in the onchance handeler. can sombody help me pleace.

**mburt** · 02-04-2007, 05:27 PM

However i dont know how to read the value in the onchance handeler. can sombody help me pleace.

What value are you looking for? If it's being displayed or not?

**mburt** · 02-04-2007, 05:29 PM

Okay, nevermind. I see.
try this:

Code:

<form name='template'>
<select name='choise' onchange="javascript:ShowContent(options[options.value.selectedIndex].value)">
<option value="uniquename">uniquename</option>
</select>
</form>

**jscheuer1** · 02-04-2007, 05:53 PM

You are going to need more than one option in the select to even have an onchange event. You might want to be showing and hiding more than one div as well.

I don't think:

Originally Posted by mburt

Code:

[options.value.selectedIndex]

has any value, though it might. Did you test it?

Anyways, if you follow my idea of multiple divisions to show and hide with multiple options in the select, you could have something like so:

Code:

function show_hide(id, show){
if(show)
document.getElementById(id).style.display = "block";
else
document.getElementById(id).style.display = "none";
}

But, there seems to be no logical trigger for hiding the content later, after it has been revealed, if desired (this would depend upon personal preference of the designer). No allowance seems to have been made for non-javascript enabled browsers either. Here is a demo that works all of this out:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:350px;
}
</style>
<script type="text/javascript">

var disStyle=0
var dom=document.getElementById||document.all

function getItem(id) {
return document.getElementById&&document.getElementById(id)? document.getElementById(id) : document.all&&document.all[id]? document.all[id] : null;
}

if(dom)
document.write('<style type="text/css" id="dummy">\
.tlink{\
display:none;\
}\
<\/style>')

if(dom&&typeof getItem('dummy').disabled=='boolean'){
document.write('<style type="text/css" id="showhide">\
.showhide{\
display:none;\
}\
#cdiv0 {\
display:block;\
}\
<\/style>');
disStyle=1;
}

function displayOne(idPrefix, idNum){
var i=0;
while (getItem(idPrefix+i)!==null){
getItem(idPrefix+i).style.display='none';
i++;
}
if (typeof idNum!=='undefined')
getItem(idPrefix+idNum).style.display='';
}

onload=function(){
displayOne('cdiv', 0);
if (disStyle)
getItem('showhide').disabled=true;
}
</script>
</head>
<body>
<select onchange="displayOne('cdiv', this.selectedIndex);">
<option>See text</option>
<option>See more text</option>
<option>See something</option>
<option>See hey</option>
</select>
<div id="container"><div class="showhide" id="cdiv0" name="cdiv0">Text Text Text Text Text Text Text Text Text Text Text <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv1" name="cdiv1">More Text More Text More Text More <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv2" name="cdiv2">Something Something Something Something Something Something Something <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv3" name="cdiv3">Hey! Hey! Hey! Hey! <a class="tlink" href="#">[Top]</a><br>&nbsp;</div></div>

</body>
</html>

But, as I say, the designer may have his/her own preferences.

**ramli66** · 02-04-2007, 05:58 PM

to:mburt
this doesnt work i dont get any javascript errors however the action is not preformed....

**ramli66** · 02-04-2007, 06:05 PM

thanks jhon your solution works

**stuboo** · 05-04-2007, 10:42 PM

John,
That works perfectly. Any chance there's a quick tweak that will allow for show/hide of multiple div's from multiple select's?

i.e.

<select id="a">...</select>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

<select id="b">...</select>
<div id="four">four</div>
<div id="five">five</div>
<div id="six">six</div>

select "a" controls div's one, two and three

select "b" controls div's four, five and six

Thanks in advance.
Ryan

**Twey** · 05-04-2007, 10:45 PM

Just give them separate ID groups:

Code:

<select onchange="displayOne('cdiv', this.selectedIndex);">
  <!-- ... -->
</select>

<select onchange="displayOne('ddiv', this.selectedIndex);">
  <!-- ... -->
</select>

<div id="cdiv1"></div>
<div id="cdiv2"></div>
<div id="cdiv3"></div>

<div id="ddiv1"></div>
<div id="ddiv2"></div>
<div id="ddiv3"></div>

**stuboo** · 05-04-2007, 10:49 PM

dang. that was easy.
i really need to study some javascript!

thanks Twey!
Ryan

**stuboo** · 05-04-2007, 11:12 PM

Okay. One more question. The addition that Twey mentioned works great for the controls. When the page loads, however, all <div>'s are showing for the second select control.

How do I make only one show?

Thanks again, I really do appreciate it.

Ryan

Thread: Hide and Unhide a div with a selectbox

Thread Tools

Search Thread

Hide and Unhide a div with a selectbox

re

re

Bookmarks

Bookmarks

Posting Permissions