Seleziona la casella si restringe in IE7 ma non IE6 o IE8

Sto riscontrando un problema in IE7 con jquery e caselle selezionate. Quando imposto la larghezza di una casella di selezione e poi utilizzo jquery per popolare di nuovo gli elementi in caso di modifica della prima casella di selezione, la seconda casella di selezione viene ridotta in base alla larghezza impostata.Seleziona la casella si restringe in IE7 ma non IE6 o IE8

Ad esempio: Il codice seguente utilizza due caselle di selezione. Quando la prima casella di selezione ha attivato un evento di cambiamento, rimuoverà tutta la seconda casella di selezione e aggiungerà alcuni nuovi valori. Se rimuovo l'attributo di stile per la seconda casella di selezione, viene soddisfatto il comportamento desiderato. Con l'attributo di stile lasciato in, la seconda casella di selezione diventerà sempre più piccola e alla fine scomparirà.

Questo succede solo in IE7.

codice è il seguente:

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

Come posso ancora indicare una larghezza, ma non hanno la casella di selezione ridursi fino a nulla? L'unico modo è una larghezza assoluta in pixel?

fonte

2009-12-15 Scott

Sembra un bug del browser, non è sicuro di quale sia la tua domanda o anche se ce n'è una. Sembra che tu abbia una risposta perfettamente accettabile, cioè usa lo stile larghezza per forzare la dimensione del menu a discesa. – Lazarus

Lazarus, un bug del browser è ciò di cui ho paura. Abbiamo avuto un sacco di tempo per allontanare i nostri utenti da IE6 a causa di bug e problemi di compatibilità. Anche se questo non è fondamentale per l'esperienza dell'utente, è un fastidio. Ad ogni modo, ho aggiunto la mia domanda alla fine del post. – Scott

Il codice seguente ottiene la seconda casella di selezione per rimanere la dimensione corretta:

 $("#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%"); 
     });

fonte

2009-12-15 17:31:28 Scott

Puoi provare questo?

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

fonte

2009-12-15 17:32:12 jitter

Ciò consente di aggiungere l'opzione alla casella di selezione, ma il problema della riduzione della selezione rimane ancora. Ho trovato un lavoro in giro e ho postato di seguito. – Scott

Nel mio caso, ho solo usato mod CSS per IE7 come seguire -

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

Nota: Per favore cambia per la larghezza equivalente in px.

fonte

2013-11-11 10:10:31

Seleziona la casella si restringe in IE7 ma non IE6 o IE8

risposta

Problemi correlati