PDA

View Full Version : 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




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




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:

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



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


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:


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

stuboo
05-05-2007, 01:18 AM
Figured it out. Just in case some other dhtml n00b like me comes along, here's what you do . . .



onload=function(){
displayOne('cdiv', 0);
displayOne('ddiv', 0);
if (disStyle)
getItem('showhide').disabled=true;
}


change this function to only load one of the div's for each one of your selects.

Thanks again everyone.

newyorker2
11-18-2008, 07:54 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:



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:


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:


<!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.



this works great except for safari.

when you select the second select box item, the hidden div is not shown.

any ideas how to make it work on safari?

i use: safari 3.2

newyorker2
11-18-2008, 08:05 PM
this works great except for safari.

when you select the second select box item, the hidden div is not shown.

any ideas how to make it work on safari?

i use: safari 3.2



i removed this part from the code and now it works in safari.

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;
}