document.getElementById(). InnerHTML pour la balise select ne fonctionne pas dans IE

Question

j'ai le script simple suivant

---

<input type="button" onclick="document.getElementById('a').innerHTML = '<option>something</option>';"/>  
<select id="a" style="width: 150px;"> 
</select> 

mais il ne fonctionne pas dans IE. pourriez-vous me dire pourquoi? merci

Answer 1

Il vous sera mieux d'avoir le script AJAX retourner un objet JSON contenant les options que vous voulez, puis en utilisant des méthodes DOM pour créer les nœuds d'option pour les faire correspondre.

Si vous devez vraiment le faire avec les chaînes HTML, la façon de le faire est d'écrire un tout nouvel élément <select> avec les options à l'intérieur. Vous pouvez ensuite copier les informations des noeuds <option> dans la sélection que vous visiez initialement.

var select= document.getElementById('a'); 
select.options.length= 0; 

var div= document.createElement('div'); 
div.innerHTML= '<select>'+options+'</select>'; 
var options= div.firstChild.options; 
for (var i= 0; i<options.length; i++) { 
    var o= options[i]; 
    select.options[i]= new Option(o.text, o.value, o.selected); 
} 

Answer 2

IE n'a pas tendance à aimer faire des choses comme ça pour de tels articles. Il en va de même pour le réglage des tables innerHTML.

Vous devriez apprendre à faire les choses comme DOM .... par exemple, en utilisant createElement ("OPTION"), puis appendChild() (retirant d'abord les enfants avec removeChild() si nécessaire). En général, il est bien mieux que innerHTML.

Answer 3

Utilisez ce code:

var optionElement = document.createElement("option"); 
optionElement.innerHTML = "some text here"; 

document.getElementById('a').appendChild(optionElement); 

Answer 4

Ou tout simplement utiliser jQuery et html() au lieu de innerHTML ...

Alors ...

$("#a").html("<option>Whatever</option>"); 

fonctionne très bien dans tous les navigateurs pour tous les objets!