I have a page with two combos: depending on the option chosen in the first combo the second combo is displayed / hidden. This works fine on FF3.5, but not under IE8. In IE8 the second combo box briefly displays and then disappears. It's running under windows XP SP3.
<table width="100%">
<tr>
<td>
<table>
<tr>
<td>
New Status
</td>
<td id="ForwardLabel">
Forward to
</td>
</tr>
<tr>
<td>
<select id="ReviewStatusID" name="ReviewStatusID" style="width:200px;">
<option value="">-- select --</option>
<option value="5">In Progress</option>
<option value="4">Forwarded</option>
<option value="2">Pending</option>
<option value="3">Rejected</option>
<option value="1">Approved</option>
</select>
</td>
<td id="ForwardCombo">
<select id="ForwardToMemberID" name="ForwardToMemberID" style="width:300px;">
<option value="">-- select --</option>
<option value="1">Fred Smith</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<!-- other table elements ommitted -->
</table>
<script type="text/javascript">
$(document).ready(function() {
// hides the controls as soon as the DOM is ready
$('#ForwardLabel').hide();
$('#ForwardCombo').hide();
// if the Status box is "Forwarded" then show the "Forward to" control
$('#ReviewStatusID').change(function() {
if ($('#ReviewStatusID').val() == 4) {
$('#ForwardLabel').show(250);
$('#ForwardCombo').show(250);
} else {
$('#ForwardLabel').hide(250);
$('#ForwardCombo').hide(250);
}
});
});
</script>