Javascript IE innerHTML de

Estoy intentando cambiar el innerHTML de un elemento basado en el valor del elemento anterior.

Tengo el javascript correctamente agarrando el valor actual y todo funciona correctamente en Firefox, Safari, Chrome y Opera. IE es un dolor.

Código de muestra:

Dedicated Voice Frame Relay ATM Dedicated Internet IP Solutions Private Port IP Solutions Enhanced Port Private Line – Domestic Int'l Private Line Qwest Metro Private Line (QMPL) Qwest Metro Ethernet Private Line (QMEPL)
1-Year 2-Year 3-Year

muestra javascript:

 function bandwidthfunction() { var product = document.getElementById('circuitproduct').value; if (product == 'Dedicated Voice') { document.getElementById('bandwidth').innerHTML = ('DS-1DS-3OC-3OC-12'); document.getElementById('sublooptype').innerHTML = ('Special AccessCO MtPt - Special AccessCPA Special Access'); } else if (product == 'Frame Relay') { document.getElementById('bandwidth').innerHTML = ('DS-1DS-3OC-3OC-12'); document.getElementById('sublooptype').innerHTML = ('Special AccessCO MtPt - Special AccessCPA Special Access'); } 

Bueno, antes que nada tienes una etiqueta de cierre para el select que tratas de poner dentro del elemento select , lo que hace que el código no sea válido.

Entonces puede haber un problema con la forma en que el elemento select trata su contenido. Cuando se analiza el código HTML, el elemento select no tiene ningún elemento secundario, como lo hace un elemento regular. En cambio, las opciones son elementos en su colección de options .

Si desea cambiar los elementos en el elemento de select , cambie el contenido de su colección de option . Es decir, para agregar elementos, crear objetos de option utilizando el método document.createElement y agregarlos a la colección. Ejemplo:

 var opt = document.createElement('OPTION'); opt.text = 'Choose me'; opt.value = 42; document.getElementById('bandwidth').options.add(opt); 

Debe eliminar el elemento “seleccionar” y el final de configurar la propiedad HTML interna. Esto no es parte de innerHTML. Es la etiqueta final del elemento ‘bandwith’ en sí.

 document.getElementById('bandwidth').innerHTML = (''); 

Aquí hay un truco útil que encontré que funciona tanto en FF como en IE como una solución a la incapacidad de cambiar innerHTML en elementos seleccionados.

 document.getElementById('bandwidth').outerHTML = document.getElementById('bandwidth').outerHTML.replace( document.getElementById('bandwidth').innerHTML + '' , '' + '' ); 

o como una función para la legibilidad:

 function swapInnerHTML(objID,newHTML) { var el=document.getElementById(objID); el.outerHTML=el.outerHTML.replace(el.innerHTML+'',newHTML+''); } 

Recientemente encontré este problema con IE. Se me ocurrió una solución llave en mano que funciona con las siguientes cosas en mente:

  • No quieres usar jQuery
  • Necesito que funcione en IE <9
  • Desea anexar (no reemplazar las opciones existentes) las opciones de cadena en un elemento de selección existente
  • El seleccionar debe ser un tipo de “seleccionar uno”
  • Debe envolver selecciones en su propio elemento principal

Tenemos muchas páginas de destino que solicitan la misma información (edad, productos, país, estado, etc.) pero con diferentes opciones de selección. La implementación que uso agrega nuevas opciones de selección. Esto se hizo para permitir una opción predeterminada personalizada por página de carga. Una página puede tener la primera opción como “seleccionar elemento”, otra puede tener “elegir una” y así sucesivamente.

Seleccionar formato:

 

Aquí está la función para APENDER / AGREGAR valores:

 function addOptions(el, options){ // checks to make sure element exists and is a select if(el && el.type === "select-one"){ el.innerHTML = el.innerHTML + options; el.parentNode.innerHTML = el.outerHTML; // needed for IE } } 

Ahora para ejecutar la función pase en el objeto de selección y valores de cadena:

 addOptions( document.getElementById("form-age"), '' ); 

Esto generará una selección con las opciones aprobadas, ¡incluso en IE!

 

Si necesita el script para REEMPLAZAR los valores, use lo siguiente:

 function replaceOptions(el, options){ if(el && el.type === "select-one"){ el.innerHTML = options; el.parentNode.innerHTML = el.outerHTML; // needed for IE } } 

¡Espero que esto ayude a alguien más!

Una búsqueda rápida muestra que este ha sido un error conocido en IE desde al menos IE5 . Podría tratar de usar createElement y hacer opciones y anexar al objeto seleccionado, o usar una biblioteca como jQuery y anexar el html al nodo (que debe encargarse de la magia necesaria para trabajar en IE).

La verdadera causa del problema es que debido a un problema de actualización / análisis sintáctico de DOM, IE no insertará elementos de option secundarios en un elemento de select . Incluso IE9 todavía tiene este problema (versiones posteriores no verificadas).

Tienes que poner la select en un div o span y reemplazar toda la select . A continuación encontrará un ejemplo que muestra que IE también jugará a la pelota. Debido a que este problema innerHTML generalmente ocurre cuando se generan dinámicamente selects, hice un ejemplo de AJAX y PHP.

El archivo html:

 < !DOCTYPE html>    Chain(ed) select with AJAX and PHP    

.

Y el archivo php, que debe llamarse ‘getoptions.php’ y debe colocarse en la misma carpeta:

 < ?php $q = $_GET['q']; $chicago_airlines ='     '; if ($q == 'chicago_airlines') { echo $chicago_airlines; } elseif ($q == 'klm_classes') { echo $klm_classes; } else { echo ''; } ?> 

.

Asegúrese de seleccionar solo las opciones con fondo amarillo en esta demostración.

usa Jquery

$('#bandwidth').html('');