Cómo actualizar HTML & # 8220; seleccione & # 8221; caja dinámicamente en IE

Question

Tengo un HTML " seleccione " elemento que estoy actualizando dinámicamente con código como este:

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);
}

Funciona bien en Firefox, pero IE7 no cambia el tamaño del cuadro de lista para que se ajuste a los nuevos datos. Si el cuadro de lista está inicialmente vacío (que es en mi caso), casi no puede ver ninguna de las opciones que he agregado. ¿Hay una mejor manera de hacer esto? ¿O una forma de parcharlo para que funcione en IE?

Answer 1

Establezca la propiedad innerHTML de los objetos de opción, en lugar de su text .

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);
}

Funciona en IE6, recién probado. No se rompe en FF3, así que supongo que esto es todo.

(Elegí " innerHTML " porque esto funciona en todos los navegadores. Para configurar el texto literal, debe usar " innerText " en IE, y " textContent " en FF, y probablemente deba probar también en otros lugares. Mientras no haya caracteres especiales (& amp ;, < ;, >) en las propiedades de "nombre", "innerHTML" será suficiente.

Answer 2

No necesita manipular DOM para esto. Prueba esto en su lugar

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

Después de agregar el elemento de opción, fuerce select.style.width a auto , incluso si ya es auto .

Si esto no funciona, borre select.style.width a " " y luego restaure select.style.width auto nuevamente.

Eso hace que Internet Explorer recalcule el ancho óptimo de los elementos select .

Answer 4

Establezca el ancho del cuadro de selección explícitamente, por ejemplo, utilizando. un CSS & # 8216; ancho & # 8217; estilo, en lugar de dejar que el navegador adivine el ancho de su contenido.

Answer 5

Puede intentar reemplazar todo el elemento seleccionado del código html generado, o como un truco que elimina el elemento del DOM y lo lee.