Hello,
I have created a small javascript jump menu that is designed to hide/display content depending on the users selection. It works perfectly in firefox, but nothing happens in IE.
The error I get in IE is:
error: could not get the display property. Invalid argument
Can anyone help? As far as I can see I am accessing the DOM correctly and using IE supported display elements. Can you see the problem? Thanks in advance.
Here is the relevant code:
The content being changed
<div id="listing" style="padding:0; margin:0; overflow:auto; border:0; width:100%; height:100%;">
<span id="E" style="display:inline;"><?php require("currentListing/E.html"); ?></span>
<span id="I" style="display:none;"><?php require("currentListing/I.html"); ?></span>
<div >
The jump menu:
<form name="jumpMenu">
<select name="menu" style="background-color: #FFFFFF; font-size: 9px; font-family: verdana; color:#000000; padding: 0; margin: 0;" size="1" onchange="jump(this.form, this.form.menu.options[this.form.menu.selectedIndex].value)">
<option value="0" selected="selected">Select Announcements</option>
<option value="0">--------------------</option>
<option value="E">External Announcements</option>
<option value="I">Internal Announcements</option>
</select>
</form>
The javascript:
<script language="javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
//if we're choosing to see external announcements
if (form.menu.options[myindex].value == "E") {
//then show the external <span>
document.getElementById("E").style.display = 'inline';
document.getElementById("I").style.display = 'none';
//if we want the internal
} else if (form.menu.options[myindex].value == "I") {
//then show the external <span>
document.getElementById("I").style.display = 'inline';
document.getElementById("E").style.display = 'none';
} else {
}
}
//-->
</script>
Any help is very much appreciated.
Thanks.