Propiedad innerHTML en un select box

2010-03-03T13:49:00.000-08:00

Artículo dirigido a programadores web y desarrolladores :

En alguna ocasión, durante el desarrollo de sus páginas web o aplicaciones, se habrán topado con la necesidad de agregar o eliminar alguna opción de las que se despliegan en una "select box", teniendo para ello que crear algún código que use las funciones "add" o "remove", digamos algo parecido a esto.

HTML

Javascript

<select id="estados" name="estados">
<option value="5">Coahuila</option>
<option value="19">Nuevo León</option>
<option value="28">Tamaulipas</option>
</select>

Para agregar :
opt = document.createElement("OPTION");
document.getElementById("estados").add(opt, 0);
opt.innerText = "Aguascalientes";
opt.value = 1;

Donde el segundo parámetro de la función add es la posición donde se desea agregar el elemento "OPTION".
Tambien existe la alternativa de utilizar funciones de DOM, quedando así :

opt = document.createElement("OPTION");
document.getElementById("estados").appendChild(opt);
opt.innerText = "Aguascalientes";
opt.value = 1;

Para eliminar basta con:
document.getElementById("estados").remove(0);Donde "0" es el índice del elemento que se desea eliminar.

Pero si quisiéramos eliminar todas las opciones del select en un solo paso podríamos utilizar :

document.getElementById("estados").innerHTML = "";

lo cual es correcto y funciona en todos los exploradores (IE, Safari, Firefox, Chrome, Opera)

Sin embargo al querer cambiar todas las opciones del select por ungrupo nuevo, no todo es como quisiéramos.
Primero necesitamos tener una variable string con el dato de las opciones :

var opciones = <option value="xxx">xxx</option><option value="yyy">yyy</option><option value="zzz">zzz</option>;
Despues aplicamos este valor a la propiedad innerHTML del select.

document.getElementById("estados").innerHTML = opciones;

solo que esto no va a funcionar en Internet Explorer, en los demás navegadores no hay problema.

Para el caso exclusivo de Internet Explorer yo he utilizado alguna de las dos siguientes alternativas :

Alternativa elegante

Esto o algo parecido se recomienda en la mayoría de los foros y blogs

var arraytextos = new Array();
var arrayvalores = new Array();
arraytextos[0] = "xxx";
arraytevalores[0] = "xxx"; // o cualquier valor que se desee asignar
arraytextos[1]= "yyy";
arrayvalores[1] = "yyy";
arraytextos[2] = "zzz";
arrayvalores[2] = "zzz";for(i=0; i>arraytextos.lenght; i++) {
opt = document.createElement("OPTION");
document.getElementById("estados").add(opt, 0);
opt.innerText = arraytextos[i];
opt.value = arrayvalores[i]; }

y listo, opciones agregadas al select box.

Alternativa nueva

var opciones = <option value="xxx">xxx</option><option value="yyy">yyy</option><option value="zzz">zzz</option>
opciones = "x" + opciones; //Muy importante, más adelante explico esto.
xselect = document.getElementById("estados");
xparent = xselect.parentElement;
xselect.innerHTML = "";
xselect.innerHTML = opciones;
xparent.innerHTML = xselect.outerHTML;

y listo, esto también funciona en los demás exploradores.

Naturalmente es necesario que el contenedor (div, span, td, etc.) del select box solo tenga este elemento en su interior, de lo contrario se eliminará lo demás.

Esta alternativa la recomiendo sobre todo cuando ya generaste la lista de opciones desde PHP ó algún otro lenguaje de servidor y tienes que regresarlo al cliente como un string de "OPTION" grandote (<option value="xxx">xxx</option><option value="yyy">yyy</option><option value="zzz">zzz</option>), sobre todo usando AJAX, evitando así tener que separar el string resultante en un array de opciones.

Ahora explico porque la "x"

Sucede que dentro de los errores que tiene el elemento "select" en Internet Explorer, al enviar la variable "opciones" a la propiedad innerHTML del select box, por alguna razón que desconozco, esta elimina el primer elemento "option", se podría pensar que se agrega un elemento de más y listo, pero este elemento de más no sería eliminado en los otros exploradores, por lo tanto al agregar un texto sin formato como la "x", esta es eliminada en Internet Explorer e ignorada en el resto de los exploradores (Safari, Firefox, Chrome, Opera).

Bye.

Scripting Blog

Propiedad innerHTML en un select box