Come inserire OPZIONI in SELECT con jQuery - Cross-Platform, Even IE6

Ho bisogno di un modo multipiattaforma per inserire OPZIONI in un SELECT con jQuery. Credo di ricordare in passato, che IE6 non fa nulla quando questo si chiama:Come inserire OPZIONI in SELECT con jQuery - Cross-Platform, Even IE6

<select id="myselect" size="1"> 
<option value=""></option> 
</select> 
<script type="text/javascript"> 
$('#myselect').append('<option value="test1">test1</option>'); 
$('#myselect').append('<option value="test2">test2</option>'); 
</script>

Credo di ricordare che quanto sopra ha lavorato in tutti i browser, così come Firefox 2+ e IE7 +, ma non IE6. Corretta? In tal caso, qual è la soluzione?

fonte

2010-07-22 Volomike

JavaScript è multipiattaforma, anche IE6.

Per testare come appare in IE6 Internet aperta Esplora opzione Usa F12 Browser e dell'acciaio, in nuovo menu a destra di debug scegliere ultimo bottone - Emulazione - lì si può vedere come funziona in IE6, IE7, IE8, IE9, IE10 ecc l'esempio a tutto schermo per testare IE6 qui: http://jsfiddle.net/3Qv6P/embedded/result/

Guarda come sta cambiando dinamicamente la lista degli stati se scelgo Uniti o in Canada

esempio: http://jsfiddle.net/3Qv6P/

<!DOCTYPE html> 
<html><head></head><body> 
<div >Country * <select id="countrysel" name="country" onchange="CountryChange(this)"> 
    <option value="">-</option> 
    <option value="38">Canada</option> 
    <option value="44">China</option> 
    <option value="178">Russia</option> 
    <option value="225">USA</option> 
    </select></div> 
    <div>State/Prov.*<select id="state" name="state" style="display: none;"><option value="">-</option></select> 
    <input id="state_other" type="text" name="province" value=""></div> 

<!-- JAVASCRIPT --> 
<script language="javascript"><!-- 
//<![CDATA[ 
    function CountryChange(id){ 
     id = id.value; 
     id = parseInt(id); 

     st=document.getElementById("state"); 
     sto=document.getElementById("state_other"); 

     st.style.display="inline"; 
     sto.style.display="none"; 
     st.options.length=0; 

     if (id == 38){ 

      var CanadaProvinces = {52:"Ontario", 53:"Quebec", 54:"British Columbia", 55:"Alberta", 56:"Manitoba", 57:"Saskatchewan", 58:"Nova Scotia", 59:"New Brunswick", 60:"Newfoundland and Labrador",61:"Prince Edward Island", 62:"Northwest Territories", 63:"Yukon", 64:"Nunavut"}; 
      for(var key in CanadaProvinces) 
      { 
       var opt = document.createElement('option'); 
       opt.value = key; 
       opt.innerHTML = CanadaProvinces[key]; 
       st.appendChild(opt); 
      } 
     } else if (id == 225){ 

      var UnitedStates = {1:"Alabama", 2:"Alaska", 3:"Arizona", 4:"Arkansas", 5:"California", 6:"Colorado", 7:"Connecticut", 8:"D.C.", 9:"Delaware", 10:"Florida",11:"Georgia",12:"Hawaii",13:"Idaho",14:"Illinois",15:"Indiana",16:"Iowa",51:"Kansas",17:"Kentucky",18:"Louisiana",19:"Maine",20:"Maryland",21:"Massachusetts",22:"Michigan",23:"Minnesota",24:"Mississippi",25:"Missouri",26:"Montana",27:"Nebraska",28:"Nevada",29:"New Hampshire",30:"New Jersey",31:"New Mexico",32:"New York",33:"North Carolina",34:"North Dakota",35:"Ohio",36:"Oklahoma",37:"Oregon",38:"Pennsylvania",39:"Rhode Island",40:"South Carolina",41:"South Dakota",42:"Tennessee",43:"Texas",44:"Utah",45:"Vermont",46:"Virginia",47:"Washington",48:"West Virginia",49:"Wisconsin",50:"Wyoming"}; 
      for(var key in UnitedStates) 
      { 
       var opt = document.createElement('option'); 
       opt.value = key; 
       opt.innerHTML = UnitedStates[key]; 
       st.appendChild(opt); 
      } 
     }else{ 
      st.style.display="none"; 
      sto.style.display="inline"; 
     } 
    }  

//]]> 
--></script> 
<!-- /JAVASCRIPT --> 
</body></html>

esempio: http://jsfiddle.net/3Qv6P/

fonte

2014-07-24 13:38:00 Intacto

Prima di tutto, non stai aspettando che il DOM sia pronto con il tuo codice. Si dovrebbe essere avvolgendo il codice jQuery in:

$(document).ready(function() { 

    $('#myselect').append('<option value="test1">test1</option>'); 
    $('#myselect').append('<option value="test2">test2</option>'); 

});

Non sono sicuro circa la compatibilità IE6, ma si potrebbe provare la funzione .appendTo invece, come ad esempio:

$('<option value="Test3">Test 3</option>').appendTo("#myselect");

esempio:

http://jsfiddle.net/W6L9d/

fonte

2010-07-22 17:22:56

nuovo, nessuno sta testando in IE6. Ricordo l'anno scorso che IE6 aveva questo bug. Sfortunatamente non ho più una workstation IE6 con cui testare. – Volomike

Ok. Beh, penso che se sei preoccupato per la compatibilità con IE6 in generale, dovresti trovare un modo per testarlo, personalmente. Ci sono modi per installare IE6 e 7 affiancati (http://tredosoft.com/Multiple_IE per esempio). –

Ho Ubuntu Linux come workstation di sviluppo. Ho una VM di test per la versione di prova di Windows 2008 Server che utilizzo per testare tutto il resto tranne IE6. La soluzione di Tredosoft non funzionerà su questo. – Volomike

Come inserire OPZIONI in SELECT con jQuery - Cross-Platform, Even IE6

risposta

Problemi correlati