开发者

jQuery hide show problem on Internet Explorer

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
    $('#Re开发者_如何学PythonviewStatusID').change(function() {
      if ($('#ReviewStatusID').val() ==  4) {  
        $('#ForwardLabel').show(250);
        $('#ForwardCombo').show(250);
      } else {
        $('#ForwardLabel').hide(250);
        $('#ForwardCombo').hide(250);
      }
    });
  });
 </script>


I have just hit exactly the same issue while back testing IE 8.

It seems to have an issue with the timer value set within the hide() or show().

I resolved my issue by replacing show(0) with show().


Its working for me, is there any other js being loaded on the page? Also you can try using bind and unbind instead of the change function.


I fixed the problem by wrapping the table elements I need to hide/show in a div i.e.

<td id="ForwardLabel">
  Forward to
</td>

becomes

<td><div id="ForwardLabel">
  Forward to
</div></td>

and that works. Thanks to all who provided assistance :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜