innerHtml sustituir no refleja

Question

tengo HTML algo como esto

<div id="foo"> 
<select> 
<option> one </option> 
</select> 
</div> 

cuando uso

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ; 

Los innerHtml reemplazados pero no se reflejan en el navegador.

Si activo innerHTML puedo ver que se ha cambiado ahora pero en el navegador todavía muestra la opción anterior.

¿Hay alguna forma de que el navegador reconozca este cambio?

Gracias de antemano.

Answer 1

funciona bien para mí en Firefox 3,5

Working Demo

EDIT: Debe utilizar IE. Es necesario crear una nueva opción y agregarlo al elemento, o modificar el texto de la opción existente

Working Demo - probado y trabajando en Firefox e IE 7.

var foo = document.getElementById('foo'); 
var select = foo.getElementsByTagName('select'); 
select[0].options[0].text = ' two '; 

Answer 2

Supongo que está utilizando IE? El problema es que debe usar la nueva Opción (...) para completar SELECT en IE. De esta manera:

document.getElementsByTagName('select')[0].options[0]=new Option(' two '); 

Editar: Hay un artículo de Microsoft Knowledge acerca de este error: http://support.microsoft.com/kb/276228

Answer 3

mejor dar un id de la etiqueta de seleccionar y utilizar la nueva opción de añadir un elemento.

var sel =document.getElementById ("selectElementID"); 
var elOptNew = document.createElement('option'); 
elOptNew.text = 'Insert' + 2; 
elOptNew.value = 'insert' + 2; 
sel.options.add (elOptNew); 

Si es necesario sustituir una opción

sel.options[indexNumber].text = 'text_to_assign'; 
sel.options[indexNumber].value = 'value_to_assign'; 

Answer 4

que está utilizando replace que requiere como primer argumento un RegEx.

Prueba esto:

document.getElementById('foo').innerHTML = document.getElementById('foo').innerHTML.replace(/<option> one <\/option>/, "<option> two </option>"); 

hace este trabajo para usted?

Answer 5

Configurando el innerHTML de una selección tiene un error en IE. No estoy seguro si arreglaron esto en 7 u 8 todavía. Corta parte del texto que le da y, por lo tanto, tiene opciones mal formadas. Entonces debes establecer el outerHTML que incluye el select. Como outerHTML es solo IE (o lo era), normalmente uso select.parentNode.innerHTML. Y asigno la ID a la selección. Pero como estás configurando el innerHTML del div, ya estás cubierto. Eso fue solo un FYI.

Creo que su problema real es que replace está esperando una expresión regular para el primer argumento. O que el elemento de opción no es lo que esperas. IE puede capitalizar el nombre de la opción y podría estar agregando un atributo seleccionado. Debería alertar al innerHTML para ver qué es antes de intentar reemplazar una cadena. Entonces usaría una expresión regular válida para hacer el reemplazo.Probablemente tendrás que escapar de la barra con una barra invertida. No creo que necesites escapar de los corchetes angulares, pero no estoy al 100% en eso.

También en mi experiencia, el método DOM (nueva opción) es más lento. Cuando tiene que reemplazar una gran cantidad de opciones, es significativamente más lento. Si solo tiene que reemplazar uno o dos, puede usar el método DOM.

Answer 6

Marque esta

document.getElementById('foo').innerHTML.replace("<option> one </option>", "<option> two </option>") ; 

si no está funcionando cambiar el navegador.

Answer 7

Una solución trabajé a cabo es la siguiente

strHTML = "&nbsp;<option value=""1"">Text1</option>" 
strHTML = strHTML + "<option value=""15"">Text2</option>" 
strHTML = strHTML + "<option value=""17"">Text3</option>" 


document.getElementById("id-selectbox").innerHTML=strHTML; 
if(Browser=="Internet Explorer"){ 
    document.getElementById("id-selectbox").outerHTML=document.getElementById("id-selectbox").outerHTML; 
} 

La cadena HTML se podría obtener con una petición AJAX.

El resultado es que el navegador reescribirá/renderizará la casilla de selección con sus opciones recién agregadas.

Aviso al: & nbsp preciding el primer código de opción Si deja esto, la primera opción va a perder sus etiquetas de opción y por lo tanto no se muestra en el nuevo agregado select-innerHtml