DHTML simple script works in Mozilla, not in IE...

rockyroad · Sep 25, 2007

Hello,

This simple code works fine in Mozilla FF but not in IE 6.
Any idea why? Is there are different event handler I should be using, or is there some other problem?

Ultimately I'll be applying this principal to a form whereby when specific option(s) are selected, hidden DIVs will become visible.

Here's my code, thanks! RR

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>

<head>
<title>Untitled Document</title>



<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function hideAll()
{
  changeDiv("reason","none");
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>
</head>

<body>

<form name="the_form" action="Pets3.html">

Status &nbsp;
<select name="AccessLevel" size="1">
	<option selected value="Select">Select</option>
	<option value ="foo">Foo</option>
	<option value="Reject" onClick="hideAll(); changeDiv('reason','block');">Reject</option>
</select>

<div id="reason" style="margin-left:30px;display:none">
		More stuf here...
</div>


</form>

</body>
</html>

rockyroad · Sep 25, 2007

OK, I see I was approaching this wrong, and that I should be doing the onChange on the <select> and not the <option> values... something like this

Code:

<html>
<head>
  <title>Select DIV to show</title>
  <script type="text/javascript">
    function show() {
      if(document.myForm.Colors.options[document.myForm.Colors.selectedIndex].value == 'Green'){
        document.getElementById('ShowGreen').style.display='block';
    }
      else
        {document.getElementById('ShowGreen').style.display='none';}
    }
  </script>
</head>
<body>
  <form name="myForm">
    <select name="Colors" onchange="show()">
      <option value="">Select</option>
      <option value="Green">Green</option>
      <option value="Blue">Blue</option>
      <option value="Orange">Orange</option>
    </select>
  </form>
  <div id="ShowGreen" style="display:none">This is the hidden div</div>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DHTML simple script works in Mozilla, not in IE...

rockyroad

Programmer

rockyroad

Programmer

Similar threads

Part and Inventory Search

Sponsor