I have a jsp page which is using JavaScript for automatic selection in onload page event
and some jQuery to dynamically expand different div tags with some content inside.
So the problem is that the calling of the setSelection method, which is in the bottom of the page in script tags, and the jQuery methods which are in a js method called toggle doesn’t work at all in IE8. However in Chrome, Firefox and IE9 it works fine.
I’ve Googled this issue a lot but I can’t find anything useful. The only errors which the debuger tool in IE8 show me are “Object required” and “Expression required”.
Here is the code:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
function toggle(el)
{
var val = el.options[el.selectedIndex].value;
if (val == "1")
{
document.getElementById("2").style.display = "none";
$("#1").slideToggle(250);
}
else if (val == "2")
{
document.getElementById("1").style.display = "none";
$("#2").slideToggle(250);
}
else if (val == "0")
{
document.getElementById("1").style.display = "none";
document.getElementById("2").style.display = "none";
}
}
function setSelection(selection)
{
//Here we make dynamic selection of the combo box
var selct = document.getElementById("sel");
selct.options[selection].setAttribute("selected", "selected");
toggle(selct);
}
</script>
</head>
<body>
<select name="mySel" id = "sel" onchange="toggle(this);">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<div id="1" style="border:1px;">
</div>
<div id="2" style="border:1px;">
</div>
<script>
setSelection(0);
</script>
</body>
</html>
Can somebody help me?
Wrap your code in document ready function and try.