Sélectionnez boîte se rétrécit dans IE7 mais pas IE6 ou IE8

Je rencontre un problème dans IE7 avec jquery et boîtes de sélection. Lorsque je définis la largeur d'une zone de sélection et que j'utilise ensuite jquery pour re-remplir les éléments lors du changement de la première zone de sélection, la seconde zone de sélection est réduite en fonction de la largeur définie. Par exemple: Le code suivant utilise deux zones de sélection. Lorsque la première boîte de sélection a un événement de changement déclenché, il enlèvera toute la seconde boîte de sélection et ajoutera de nouvelles valeurs. Si je supprime l'attribut de style pour la deuxième boîte de sélection, le comportement souhaité est atteint. Avec l'attribut de style restant, la deuxième boîte de sélection deviendra de plus en plus petite et finira par disparaître.Sélectionnez boîte se rétrécit dans IE7 mais pas IE6 ou IE8

Cela se produit uniquement dans IE7.

code est le suivant:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>test</title> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#selOne").change(function(){ 
       //Clear out the current service list 
       $("#selTwo option").each(function(){ 
        $(this).remove(); 
       }); 

       for(var i=0; i < 10; i++){ 
        var newOption = '<option value="'+ i +'">'+ i +'</option>'; 
        $("#selTwo").append(newOption); 
       } 
      }); 
     }); 
    </script> 

</head> 
<body> 
    <select id="selOne" class="number req" style="width: 90%;"> 
     <option value="" selected="selected">Initial Select</option> 
     <option value="">a</option> 
     <option value="">b</option> 
     <option value="">c</option> 

    </select> 
    <select id="selTwo" class="number req" style="width: 90%;"> 
     <option value="" selected="selected">These should update</option> 
     <option value="">100</option> 
     <option value="">101</option> 
     <option value="">102</option> 
    </select> 
</body> 
</html>

Comment puis-je spécifier encore une largeur, mais pas la boîte de sélection rétrécir à rien? Est-ce que le seul moyen est une largeur absolue en pixels?

Source

2009-12-15 Scott

Cela ressemble à un bug de navigateur, je ne sais pas quelle est votre question ou même s'il y en a une. On dirait que vous avez une réponse parfaitement acceptable, c'est-à-dire que vous utilisez le style de largeur pour forcer la taille de la liste déroulante. – Lazarus

Lazarus, un bug de navigateur est ce que j'ai peur de. Nous avons eu un sacré coup de temps à sortir nos utilisateurs d'IE6 en raison de bugs et de problèmes de compatibilité. Bien que ce ne soit pas critique pour l'expérience de l'utilisateur, c'est un désagrément. De toute façon, j'ai ajouté ma question à la fin du post. – Scott

Le code suivant obtient la deuxième boîte de sélection pour rester la bonne taille:

 $("#selOne").change(function(){ 
      //Clear out the current service list 
      $("#selTwo option").each(function(){ 
       $(this).remove(); 
      }); 

      /* IE7 Fix: reset the width based on pixels 
       It doesn't matter to how many, just that 
       the width is in pixels 
      */ 
      $("#selTwo").css("width","1px"); 

      for(var i=0; i < 10; i++){ 
       var newOption = '<option value="'+ i +'">'+ i +'</option>'; 
       $("#selTwo").append(newOption); 
      } 

      /*IE7 FIX: rest the width back to our desired percent */ 
      $("#selTwo").css("width","90%"); 
     });

Source

2009-12-15 17:31:28 Scott

vous pouvez essayer celui-ci?

$("<option>").attr("value", i).text(i).appendTo("#selTwo");

Source

2009-12-15 17:32:12 jitter

Cela fonctionne pour obtenir l'option ajoutée à la zone de sélection, mais le problème de la réduction de boîte de sélection reste toujours. J'ai trouvé un travail autour et j'ai posté ci-dessous. – Scott

Dans mon cas, je viens d'utiliser hack CSS pour IE7 comme suit -

select.number { *width: 280px !important; }

Note: S'il vous plaît changer votre largeur équivalente en px.

Source

2013-11-11 10:10:31

Sélectionnez boîte se rétrécit dans IE7 mais pas IE6 ou IE8

Répondre

Questions connexes