<script type="text/javascript">
var divs = ["div0", "div1", "div2", "div3",];
//var divs13 = ["div1", "div3"];
function visiblox(arrDiv, hs) {
	var disp = (hs) ? "none" : "block";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}

</script>
<script type="text/javascript">
document.write('<style type="text/css">.hide {display: none;}<\/style>');
</script>
  </head>
  
  <body>
    Decision <select name="list" onchange="chk(divs); chk([divs[this.value]], true);">
  <option value="0">Select One</option>
  <option value="1">Show DIV 1</option>
  <option value="2">Show DIV 2</option>
  <option value="3">Show DIV 3</option>

</select>
	
<div id="div0" class="hide"></div>
<div id="div1" class="show">
	<table border="0" width="500px;">	
	<tr>
		<td width="150px;">Grant access to:</td>
		<td></td>
	</tr>
	<tr>
		<td width="150px;"></td>
		<td><input type="checkbox" name="1" value="1">1</td>
	</tr>
	<tr>
		<td width="150px;"></td>
		<td><input type="checkbox" name="2" value="2">2</td>
	</tr>
	<tr>
		<td width="150px;"></td>
		<td><input type="checkbox" name="3" value="3">3</td>
	</tr>
	<tr>
		<td width="150px;"></td>
		<td><input type="checkbox" name="4" value="4">4</td>
	</tr>
	</table>
</div><br>
<div id="div2" class="show">
	<table border="0" width="500px;">
	<tr>
		<td>Forward request to the employer:</td>
	</tr>
	<tr>
	<td><select id="reason" forceId="true" onchange="onChangeEmployerDropDown();" value="employer">									
         <option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select></td>
	</tr>
</table>
</div><br>
<div id="div3" class="show">
	<table border="0" width="500px;">
	<tr>
	         <td>Access declined due to:</td>
	</tr>
	<tr>
		<td><select id="reason" forceId="true" onchange="onChangeEmployerDropDown();" value="employer">
		<option value="reason 1">Reason 1</option>
		<option value="reason 2">Reason 2</option>
		</select></td>
	</tr>
	<tr>
		<td><textarea rows="5" cols="80"></textarea></td>
	</tr>
		</table>
</div><br>

  </body>

I have the code functioning okay in FF and Chrome, however, when it runs in IE, when an item is selected, everything simply disappears. Please help!

Thanks so much all!

Hmm... You need to update this line...

document.getElementById(arrDiv[x]).style.display = disp;

There are 2 values you can use for the display. "none" is for hiding and anything else (preferred null) to get rid of "display" style. i.e...

document.getElementById(arrDiv[x]).style.display = "none";  // for hiding
document.getElementById(arrDiv[x]).style.display = null;  // for showing
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.