Comment insérer OPTIONS dans SELECT avec jQuery - multiplate-forme, même IE6

J'ai besoin d'une manière multiplateforme pour insérer OPTIONS dans un SELECT avec jQuery. Je pense que je me souviens dans le passé que IE6 ne fait rien quand on appelle cela:Comment insérer OPTIONS dans SELECT avec jQuery - multiplate-forme, même 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>

Je pense que je me souviens que ce qui précède a travaillé dans tous les navigateurs, ainsi que Firefox 2+ et IE7 +, mais pas IE6. Correct? Si oui, quelle est la solution de contournement?

Source

2010-07-22 Volomike

JavaScript est multi-plateforme, même IE6.

Pour tester à quoi il ressemble dans IE6 ouvrez Internet Explorer le navigateur et l'option utilisation F12, et dans le nouveau menu debug droite choisissez dernier bouton - Emulation - là, vous pouvez voir comment cela fonctionne dans IE6, IE7, IE8, IE9, IE10 etc. l'exemple plein écran pour tester IE6 ici: http://jsfiddle.net/3Qv6P/embedded/result/

Voyez comment dynamiquement changer la liste des états si je choisis le Canada ou des États-Unis

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

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

Source

2014-07-24 13:38:00 Intacto

Tout d'abord, vous n'attendez pas que le DOM soit prêt avec votre code. Vous devez terminerons votre code jQuery dans:

$(document).ready(function() { 

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

});

Je ne suis pas sûr de la compatibilité IE6, mais vous pouvez essayer la fonction .appendTo à la place, tels que:

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

exemple:

http://jsfiddle.net/W6L9d/

Source

2010-07-22 17:22:56

Encore une fois, personne ne teste dans IE6. Je me souviens l'année dernière que IE6 avait ce bug. Malheureusement, je n'ai plus de station de travail IE6 à tester. – Volomike

Ok. Eh bien, je pense que si vous êtes préoccupé par la compatibilité IE6 en général, vous devriez trouver un moyen de tester, personnellement. Il existe des moyens d'installer IE6 et 7 côte à côte (http://tredosoft.com/Multiple_IE par exemple). –

J'ai Linux Ubuntu comme poste de travail de développement. J'ai une VM de test pour la version d'évaluation de Windows 2008 Server que j'utilise pour tester tout le reste sauf IE6. La solution de Tredosoft ne fonctionnera pas là-dessus. – Volomike

Comment insérer OPTIONS dans SELECT avec jQuery - multiplate-forme, même IE6

Répondre

Questions connexes