innerHTML sostituire non riflette

Question

ho HTML qualcosa di simile

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

quando uso

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

I innerHTML vengono sostituiti, ma non vengono riflessi nel browser.

Se avviso innerHTML, posso vedere che è stato modificato ora ma nel browser mostra ancora l'opzione precedente.

Esiste un modo per rendere questa modifica riconosciuta dal browser?

Grazie in anticipo.

Answer 1

funziona bene per me in Firefox 3,5

Working Demo

EDIT: È necessario utilizzare Internet Explorer. È necessario creare una nuova opzione e aggiungerlo all'elemento, o modificare il testo dell'opzione esistente

Working Demo - provato e funzionando in Firefox e IE 7.

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

Answer 2

Immagino tu stia usando IE? Il problema è che devi usare la nuova opzione (...) per popolare SELECT in IE. Come questo:

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

Edit: C'è un articolo Microsoft Knowledge Base su questo bug: http://support.microsoft.com/kb/276228

Answer 3

meglio dare un id al tag selezionare e utilizzare nuova opzione per aggiungere un elemento.

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

Se è necessario sostituire un'opzione

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

Answer 4

si sta utilizzando replace che richiede come primo argomento una RegEx.

Prova questo:

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

fa questo lavoro per voi?

Answer 5

L'impostazione dell'HTML interno di una selezione presenta un bug in IE. Non sono sicuro se hanno risolto questo in 7 o 8 ancora. Tocca parte del testo che gli viene dato e quindi presenta opzioni non valide. Quindi devi impostare l'hHML esterno che include la selezione. Poiché outerHTML è solo IE (o era), di solito utilizzo select.parentNode.innerHTML. E assegno l'ID alla selezione. Ma dal momento che stai impostando il innerHTML del div, sei già coperto. Era solo una FYI.

Penso che il tuo vero problema è che la sostituzione si aspetta un'espressione regolare per il primo argomento. O che l'elemento opzione non è quello che ti aspetti. IE può capitalizzare il nome dell'opzione e potrebbe aggiungere un attributo selezionato. Dovresti avvisare l'innerHTML per vedere di cosa si tratta prima di provare a sostituire una stringa. Quindi userei un'espressione regolare valida per fare la sostituzione.Probabilmente dovrai sfuggire alla barra con un backslash. Non credo che sia necessario sfuggire alle parentesi angolari ma non ne sono al 100%.

Anche nella mia esperienza il metodo DOM (nuova opzione) è più lento. Quando devi sostituire un gran numero di opzioni è molto più lento. Se devi solo sostituirne uno o due, puoi usare il metodo DOM.

Answer 6

Scegli questa

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

se non funziona modificare il browser.

Answer 7

Una soluzione che ho lavorato fuori va

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 stringa di codice HTML potrebbe essere ottenuto da una richiesta AJAX come segue.

Il risultato è che il browser riscriverà/rendering del selectbox con le sue opzioni appena aggiunto.

Avviso il: & nbsp preciding il primo codice di opzione Se si lascia questo fuori, la prima opzione perderà le sue tag di opzione e per questo non verrà mostrato nel nuovo aggiunto select-innerHTML