JQuery .show不能在IE7中工作

Question

这个.show和.hide在Firefox 3中很好用，但在IE 7中不能用。 当我点击<在IE中的列表中时，跨度隐藏但是不会在 之间再次显示再次。

我做错了什么？

<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

试试这个（有些东西我留在评论放在一起到其他两个答案）：

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

Answer 2

更新：请原谅我，如果这个答案是关闭的;我不是一个jQuery用户。这些是我的想法，但：

lst.value是不是一种有效的方式来访问IE中选择元素中的元素; （？或者是一个jQuery招）至少，我从来没有见过它这样做的方式

而是执行此操作：

if (lst.options[lst.selectedIndex].text == 'Between') { ... 

还要注意，我用了“文本”属性，因为这是<option>标签之间的值。 value属性是应该存在于<option>元素上的属性，例如：<option value="0">Between</option>

Answer 3

尝试使用jQuery来查找和读取元素。事情是这样的：

所有的

function onselectchange() { 
     var lst = $('#lst'); 
     var sp = $('#spanAnd'); 
     if ($(lst).val() == 'Between') { 
      $(sp).show(); 
     } 
     else { 
      $(sp).hide(); 
     } 
    } 

Answer 4

首先，要获得与jQuery选择的选项的文字是

$("#lst option:selected").text(); 

请参阅本http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3F如果你需要进一步澄清。

所有的二，得到它没有图书馆，

var lst = document.getElementById('lst'); 
var ind = lst.selectedIndex; 

var text = lst.options[ind].text; 

Answer 5

这在IE和Firefox

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

    <span id="spanAnd">And</span> 

    <script type="text/javascript"> 
     function onselectchange() { 
      if ($('#lst :selected').text() == "Between") { 
       $('#spanAnd').show(); 
      } 
      else { 
       $('#spanAnd').hide(); 
      } 
     } 
    </script> 

Answer 6

使用在页面加载了jQuery绑定方法......这将有助于摘要您的演示逻辑中的交互逻辑。

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

......正如我所说，它有点像你想做的事情。

Answer 7

有很多的问题，你必须在那里。

不包装在$（document）.ready（）;该脚本执行时可能不会加载该元素。

使用以数字开头的变量名称。 （不好的风格，不确定是否允许）

使用与元素ID相对应的变量名称。

（IE的老版本允许您使用ID.whatever不调用的document.getElementById（））

混合的jQuery /标准DOM。

调用VAL（）为您提供了期权的价值属性，而不是选择

<select id="first"> 
     <option value="between">Between</option> 
     <option>&lt;</option> 
    </select> 

    <span id="spanAnd">And</span> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 

     $("#first").change(function(){ 

      if ($("#first").val() == 'between') { 
       $("#spanAnd").show(); 
      } 
      else { 
       $("#spanAnd").hide(); 
      } 

     }); 
     }); 
    </script>