InnerHTML IE 8 ne fonctionne pas correctement? Réinitialisation du formulaire

Question

Oui, cela fonctionne dans FF et Chrome, mais pour une raison ne fonctionnera pas dans IE 8. J'utilise un bouton radio pour effacer une section d'un formulaire .. cette section est une boîte de sélection, mais je ne sais pas Je veux laisser la zone vide - à la place, je veux la réinitialiser à ce qu'elle était lorsque la page chargée. En ce moment IE8 me laisse juste avec une petite boîte de sélection vide.

Html:

<select id="city_select" disabled="true" name="location_id" onchange="show_search_button();"><option selected>Select your city</option> </select> 

Javascript:

document.getElementById('city_select').innerHTML = "<option selected>Select your city</option>"; 

J'ai aussi essayé d'utiliser location_id au lieu de city_select dans le javascript, mais sans succès .. innerText et innerContent ne fonctionnent pas non plus .. bien le inner.HTML fonctionne dans IE8 pour une fonction antérieure, mais cela n'essaie pas de mettre innerHTML dans un formulaire. Est-ce que quelqu'un sait pourquoi cela fonctionne dans Chrome et FF, mais pas IE8? et y a-t-il une solution à cela? Toute aide appréciée merci!

Answer 1

Essayez ceci:

document.getElementById('city_select').options.length = 0; 

Ensuite, créez une nouvelle option et le pousser sur le tableau d'options de sélection. Les options sont un peu délicat qui ne se comporte pas comme les autres balisages.

Edité pour montrer comment créer une option:

var sel = document.getElementById('city_select').options.length = 0; 
var opt = document.createElement('option'); 
opt.value = "Select Your City"; 
sel.options.push(opt); 
sel.selectedIndex = 0; 

Answer 2

Il est censé être 4 façon d'attribuer de nouvelles options à un élément de sélection. Certains travaillent dans certains scénarios et d'autres dans d'autres. Regardez ici - How to Add options to <SELECT>, in IE Windows Mobile 5

Pour moi, la solution de Robusto ne fonctionnait pas à cause de trois raisons:

variables

1) sel dans la première ligne est affectée document.getElementById('city_select').options.length = 0; au lieu de tenir simplement l'élément de sélection (pour une utilisation ultérieure dans 4 et 5e ligne), puis la suppression des options dans une ligne suivante, comme ceci:

var sel = document.getElementById('city_select'); 
sel.options.length = 0; 

2) la 4e ligne sel.options.push(opt) (ou suggéré plus tard sel.options[0] = opt) renvoie une objet ne prend pas en charge cette propriété ou méthode erreur. Au lieu de cela, utilisez ceci:

sel.appendChild(opt); 

3) en plus d'assigner des valeurs aux options, vous devez également assigner du texte à afficher. Vous le faites comme ceci:

opt.innerText = "Select Your City - displayed"; 

Par conséquent, pour résumer toute la pièce:

var sel = document.getElementById('city_select'); 
sel.options.length = 0; 
var opt = document.createElement('option'); 
opt.value = "Select Your City"; 
opt.innerText = "Select Your City - displayed"; 
sel.appendChild(opt); 
sel.selectedIndex = 0;