JQuery .show不能在IE7中工作

Question

这个.show和.hide在Firefox 3中很有用,但在IE 7中不行.当我在IE中的列表中单击<时,跨度隐藏但当我再次选择Between时不再显示.

难道我做错了什么？

    <select id="lst" onchange="onselectchange();">
        <option>Between</option>
        <option>&lt;</option>
    </select>   
    &nbsp;&nbsp;
    <span id="spanAnd">And</span>

   <script type="text/javascript">
       function onselectchange() {
           var lst = document.getElementById('lst');
           var sp = document.getElementById('spanAnd');
           if (lst.value == 'Between') {
               $('#spanAnd').show();
           }
           else {
               $('#spanAnd').hide();
           }
       }
   </script>

编辑:我试过onclick和onchange.

Answer 1

在页面加载时使用jQuery bind方法...它将有助于从表示逻辑中抽象出交互逻辑.

<script type="text/javascript">
    $(function() {
        $('#lst').bind('change',function() {
            var sp = $('#spanAnd');
            if($(this).val() == 'Between') {
               sp.show();
            } else {
               sp.hide();
            }
        });
    });
</script>

这就像它得到的一样简单......

注意:我刚刚注意到您正在检查选项的文本而不是选中框的值.坦率地说,我认为这很愚蠢,但如果你出于某种原因需要这样做,你可以这样做:

<script type="text/javascript">
    $(function() {
        $('#lst').bind('change',function() {
            var sp = $('#spanAnd');
            var selected_text = $(this).find('option:selected').html();
            // Possibly faster ways (thanks to bayard and bendewey):
            /*
            var selected_text = $("#lst option[value=" + $('#lst').val() + "]").text();
            // ... or ...
            var selected_text = $("option[value="+$('#lst').val()+"]",this).text();
            // ... or even... 
            var selected_text = $(this).children('option[value="+$('#lst').val()+"]").text();
            */ 
            if(selected_text == 'Between') {
               sp.show();
            } else {
               sp.hide();
            }
        });
    });
</script>

要使我的原始建议有效,您需要将HTML更改为:

<select id="lst" onchange="onselectchange();">
    <option value="Between">Between</option>
    <option value="&lt;">&lt;</option>
</select>

......正如我所说,有点像你想要做的事情.