One menu, 2 divs, diferent content...

[Seth]

Is there any way to have one drop down menu manipulate two divs, each div having its own content?

Thanks

PS: Also, the default menu selections and the div content needs to appear on page load.

YOU GUYS ROCK!!

[mili]

try this:

<script language="javascript">

var currDivObj = null;
function changeDIV(selObj) {
var divObj;
selValue = selObj.options[selObj.selectedIndex].value;
if(document.all)
divObj = eval("window.div" + selValue);
else
divObj = document.layers["div" + selValue];


if(document.all){
if(currDivObj){
currDivObj.style.visibility = "hidden";
}
divObj.style.visibility = "visible";
}else {
if(currDivObj){
currDivObj.visibility = "hide";
}
divObj.visibility = "show";
}
currDivObj = divObj;
}
</script>


<form>
<table><tr>
<TD align="right">
<select name="sel1" onChange = "changeDIV(this)">
<option value="Image">Image</option>
<option value="Video">Video</option>
<option value="Audio">Audio</option>
<option value="Document">Document</option>
</select>
</TD>
</tr></table>


<div id="divVideo" name="divVideo" style="visibility:hidden;position:absolute"><H1>Video</H1></div>
<div id="divImage" name="divImage" style="visibility:hidden;position:absolute"><H1>Image</H1></div>
<div id="divAudio" name="divAudio" style="visibility:hidden;position:absolute"><H1>Audio</H1></div>
<div id="divDocument" name="divDocument" style="visibility:hidden;position:absolute"><H1>Document</H1></div>
</form>

[Seth]

Cool, but actually what I'm looking for is to have the menu display some content in one div, and then in a seperated div display the name of the selection. Got anything for that?

Thanks

[DrDaMour]

using the id of a div, you can change the html that is contained with it by doing


document.all.divid.innerHTML = "html here";

so for <div id="first"></div>

document.all.first.innerHTML = "html here";