JQuery .show ne fonctionne pas dans IE7

Question

Ce .show et .hide fonctionne très bien dans Firefox 3, mais pas dans IE 7. Lorsque je clique sur < dans la liste dans IE le cache se cache mais ne montre encore quand je sélectionne entre encore.

Ai-je fait quelque chose de mal?

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

EDIT: J'ai essayé onclick et onchange.

Answer 1

Essayez ceci (mettre ensemble des choses que j'ai laissé dans les commentaires à deux autres réponses):

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

Answer 2

Mise à jour: Pardonnez-moi si cette réponse est loin; Je ne suis pas un utilisateur jQuery. Ce sont mes pensées si:

lst.value n'est pas une manière valide d'accéder aux éléments dans un élément de sélection dans IE; (? Ou est-ce un truc jQuery) au moins, je ne l'ai jamais vu faire de cette façon

Pour ce faire, à la place:

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

Notez également que je la propriété « texte », comme cela est la valeur entre les balises <option>. La propriété value est l'attribut supposé exister sur l'élément <option>, par exemple: <option value="0">Between</option>

Answer 3

Essayez également d'utiliser jQuery pour rechercher et lire les éléments. Quelque chose comme ceci:

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

Answer 4

Tout d'abord, pour obtenir le texte de l'option sélectionnée avec jQuery est

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

Reportez-vous à ce http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_get_the_text_value_of_a_selected_option.3F si vous avez besoin plus de précisions.

Deuxièmement, pour obtenir sans une bibliothèque,

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

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

Answer 5

Cela fonctionne dans IE et 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

Utilisez la méthode bind jQuery sur chargement de la page ... il vous aidera abstrait votre logique d'interaction de votre logique de présentation.

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

C'est à peu près aussi simple que cela ...

REMARQUE: Je viens de remarquer que vous vérifiez le texte de l'option et non la valeur de la zone de sélection. Franchement, je pense que c'est idiot, mais si vous avez besoin de le faire pour une raison quelconque, vous pouvez le faire:

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

Pour faire mon travail de suggestion originale, vous devez changer votre code HTML à:

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

... qui, comme je l'ai dit, semble un peu comme ce que vous voulez faire de toute façon.

Answer 7

Il y a beaucoup de problèmes que vous avez là.

ne pas envelopper dans $ (document) .ready(); L'élément peut ne pas être chargé lorsque le script est exécuté.

Utilisation d'un nom de variable commençant par un nombre. (mauvais style et pas sûr que c'est même autorisé)

En utilisant le nom de variable qui correspond à l'ID d'un élément.

(Les anciennes versions de IE vous a permis d'utiliser ID.whatever sans appeler document.getElementById())

mélange jQuery/Standard DOM.

appel val() vous donne l'attribut de valeur d'option, pas le texte de l'option

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