Comment mettre à jour HTML & 8282; sélectionnez & # 8221; box dynamiquement dans IE

Question

J'ai un code HTML "sélectionner". élément que je mets à jour dynamiquement avec du code quelque chose comme ça:

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt = document.createElement('option');
  opt.value = data[i].id;
  opt.text = data[i].name;
  selector.appendChild(opt);
}

Fonctionne correctement dans Firefox, mais IE7 ne redimensionne pas la liste pour s’adapter aux nouvelles données. Si la zone de liste est initialement vide (ce qui est le cas dans mon cas), vous pouvez difficilement voir les options que j'ai ajoutées. Y a-t-il une meilleure manière de faire cela? Ou un moyen de le corriger pour qu'il fonctionne dans IE?

Answer 1

Définissez la propriété innerHTML des objets option au lieu de leur texte .

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt       = document.createElement('option');
  opt.value     = data[i].id;
  opt.innerHTML = data[i].name;
  selector.appendChild(opt);
}

Fonctionne sur IE6, juste testé. Ne casse pas en FF3, donc je suppose que ça y est.

(J'ai choisi "innerHTML" parce que cela fonctionne sur plusieurs navigateurs. Pour définir le texte littéral, vous devez utiliser "innerText" sur IE et "textContent" sur FF, et vous devez probablement tester Tant qu'il n'y a pas de caractères spéciaux (& amp ;, < ;, >) dans le "nom" propriétés, "innerHML" suffira.

Answer 2

Vous n'avez pas besoin de manipuler DOM pour cela. Essayez ceci à la place

var selector = document.getElementById('selectorId');  
for (var i = 0; i < data.length; ++i) {
    selector.options[selector.options.length] = new Option(data[i].name, data[i].id);
}

Answer 3

Après avoir ajouté l'élément option, forcez select.style.width sur auto , même s'il est déjà auto .

Si cela ne fonctionne pas, désactivez select.style.width en "" ", puis restaurez select.style.width . à auto à nouveau.

Cela oblige Internet Explorer à recalculer la largeur optimale des éléments select .

Answer 4

Définissez la largeur de la zone de sélection de manière explicite, en utilisant par exemple. style CSS "width", au lieu de laisser le navigateur deviner la largeur de son contenu.

Answer 5

Vous pouvez essayer de remplacer l’élément select entier à partir du code HTML généré ou de le supprimer de l’élément du DOM et de le lire à nouveau.