0
<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!

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Taywin
0

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

Edited by Taywin: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.