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?