PDA

View Full Version : Controlling visability w/ mouse events

pamrbush
06-20-2003, 05:24 PM
How do I use javascript to affect the visability of controls. Specifically, if the user chooses option1 in the drop down box, I want text box 1 and 2 to become visiable. If the user chooses option2 in the drop down box, I want text box 3 to become visable. I'm a complete javascript amateur, example would be useful.
Frank
06-20-2003, 06:39 PM
This should help

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#MainList { position: absolute; top: 130; left: 75}
#Box1 { position: absolute; top: 130; left: 205; visibility: hidden}
#Box2 { position: absolute; top: 130; left: 205; visibility: hidden}
</style>

<script language="JavaScript" type="text/javascript">
function ShowBoxes()
{
if (document.getElementById("MainList").value == 'select')
{
document.getElementById('Box1').style.visibility = 'hidden';
document.getElementById('Box2').style.visibility = 'hidden'; }
else if (document.getElementById("MainList").value == 'showbox1')
{
document.getElementById('Box1').style.visibility = 'visible';
document.getElementById('Box2').style.visibility = 'hidden'; }
else if (document.getElementById("MainList").value == 'showbox2')
{
document.getElementById('Box1').style.visibility = 'hidden';
document.getElementById('Box2').style.visibility = 'visible';
}
}
</script>
</head>
<body >


<div>
<select id="MainList" onChange="ShowBoxes()">
<option value="select" selected >-Select-</option>
<option value="showbox1" >Show Box1</option>
<option value="showbox2" >Show Box2</option>
</select>
</div>

<div id="Box1" >
<select size="5">
<option value="Value b1">Value b1</option>
<option value="Value b1">Value b1</option>
</select>

</div>

<div id="Box2">
<select size="5">
<option value="Value b2" selected>Value b2</option>
<option value="Value b2">Value b2</option>
<option value="Value b2">Value b2</option>
</select>
</div>

</body>
</html>
pamrbush
06-20-2003, 11:07 PM
That works well - thank you. But I'm not there yet. The div tag doesn't work if I have <tr> and <td> tags. My tags are little more involved than this, but I wanted to keep it simple. Does it have anything to do with the document.getElementById() method?

<div id="Box1" >
<tr><td>
<select size="5">
<option value="Value b1">Value b1</option>
<option value="Value b1">Value b1</option>
</select>
</td></tr>
</div>
Frank
06-21-2003, 02:38 PM
Without seeing what you are doing, I can't be sure.

Why is the div outside the <tr> and <td> tags where is the <table> tag?

If you want to have the div inside the table you can try doing this

<tr>
<td>
<div>
</div>
</td>
<tr>


You could us style="position:absolute" to place the div instead of a table

Hope that helps