2 votos

Javascript "selectElement.add(option, index)" funciona en Firefox pero no en Chrome

Aquí está el HTML correspondiente:

<html>
<body>
...
    <select id="class" name="class">
        <option value=0>Select a Class</option>
        <option>IGME-101-##</option>
        <option>IGME-102-##</option>
        <option>IGME-105-##</option>
        <option>IGME-106-##</option>
        <option>IGME-119-##</option>
        <option>IGME-202-##</option>
        <option>IGME-209-##</option>
        <option>IGME-219-##</option>
        <option>IGME-220-##</option>
        <option>IGME-230-##</option>
        <option>IGME-309-##</option>
        <option>IGME-320-##</option>
        <option>IGME-330-##</option>
        <option>IGME-450-##</option>
        <option>IGME-470-##</option>
        <option>IGME-499-##</option>
        <option>IGME-529-##</option>
        <option>IGME-540-##</option>
        <option>IGME-550-##</option>
        <option>IGME-560-##</option>
        <option>IGME-571-##</option>
        <option>IGME-580-##</option>
        <option>IGME-581-##</option>
        <option>IGME-582-##</option>
        <option>IGME-588-##</option>
        <option>IGME-590-##</option>
        <option>IGME-599-##</option>
        <option>IGME-609-##</option>
        <option>IGME-671-##</option>
        <option>IGME-680-##</option>
        <option>IGME-740-##</option>
        <option>IGME-760-##</option>
        <option>IGME-789-##</option>
        <option>IGME-795-##</option>
        <option>IGME-796-##</option>
        <option>IGME-797-##</option>
        <option>IGME-799-##</option>
        <option>IGME-900-##</option>
        <option>IGME-901-##</option>   
    </select>
...
    <input id="ukClass" name="ukClass" type="checkbox" onclick="setClassUnknown()"/>
</body>
</html>

Y el Javascript correspondiente:

function setClassUnknown() {
        var select = document.getElementById("class");
        if(document.getElementById("ukClass").checked) {
            var opt = document.createElement("option");
            opt.text = "0000-000-00";
            opt.value = "0000-000-00";
            select.add(opt,1);
            select.selectedIndex = 1;
            select.disabled = true;
        }
        else {
            if(select.options[1].value == "0000-000-00") {
                select.remove(1);
            }
            select.selectedIndex = 0;
            if(select.disabled) {
                select.disabled = false;
            }
        }
    }

He estado depurando esto durante un tiempo. Funciona perfectamente en Firefox.

Lo que intento hacer es añadir dinámicamente una etiqueta de opción a este menú de selección (en un lugar específico de la lista: 1) cuando se marca una casilla de verificación, y eliminar esa opción cuando se desmarca la casilla. Usando console.log Puedo ver que Chrome crea la nueva etiqueta de opción como se desea, pero no consigue añadirla al menú de selección.

¿Alguna idea de por qué funciona en Firefox pero no en Chrome?

1voto

Pablo Puntos 3168

Parece que Firefox admite dos opciones:

Los habituales

void add(
  in nsIDOMHTMLElement element,
  in nsIDOMHTMLElement before //Optional from Gecko 7.0
);

Éste es para HTML5

void add(
  in HTMLElement element,
  in long before //Optional from Gecko 7.0
);

Pero Chrome sólo implementa la primera, como ha señalado uno de los comentarios. Si pasas un número como segundo parámetro, Chrome lo ignora y añade el nuevo elemento al final de la lista, por lo que tu código no puede encontrarlo en la primera posición.

Puedes arreglarlo haciendo que FF añada a la última posición (pero entonces tendrás que comprobar cuántas opciones tienes para seleccionarla) o cambiando el segundo parámetro , pasando el primero actual.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X