innerHTML zastąpić nie odzwierciedla

Question

mam coś HTML jak ten

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

kiedy używam

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

innerHTML zastępowane ale nie zostanie odbity w przeglądarce.

Po ostrzeżeniu innerHTML widzę, że zostało ono zmienione, ale w przeglądarce nadal pokazuje starą opcję.

Czy istnieje sposób, aby ta zmiana została rozpoznana przez przeglądarkę?

Z góry dziękuję.

Answer 1

działa dobrze dla mnie w Firefoksie 3.5

Working Demo

EDIT: Musisz być przy użyciu IE. Musisz utworzyć nową opcję i dodać go do elementu lub zmianę tekstu istniejącego opcji

Working Demo - sprawdzony i pracuje w Firefox i IE 7.

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

Answer 2

Zgaduję, że korzystasz z IE? Problem polega na tym, że musisz użyć nowej opcji (...), aby zapełnić SELECTy w IE. Tak:

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

Edit: Jest artykuł Microsoft Baza wiedzy na temat tego błędu: http://support.microsoft.com/kb/276228

Answer 3

Lepiej podać identyfikator do wybranej zmiennej i użyć nowej opcji, aby dodać element.

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

Jeśli trzeba wymienić opcję

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

Answer 4

używasz replace który jako pierwszy argument wymaga RegEx.

Spróbuj tego:

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

to działa dla Ciebie?

Answer 5

Ustawienie innerHTML dla select ma błąd w IE. Nie jestem pewien, czy naprawili to jeszcze w 7 lub 8. Odcina część tekstu, który ci poda, i dlatego ma wadliwe opcje. Musisz więc ustawić zewnętrzny plik HTML, który zawiera zaznaczenie. Ponieważ outerHTML jest tylko IE (lub był), zwykle używam select.parentNode.innerHTML. I przypisuję identyfikator do wyboru. Ale ponieważ ustawiasz innerHTML div, jesteś już objęty. To był tylko FYI.

Myślę, że twoim prawdziwym problemem jest to, że zamień oczekuje pierwszego wyrażenia regularnego. Lub, że element opcji nie jest tym, czego oczekujesz. IE może zamapować nazwę opcji i może dodać wybrany atrybut. Powinieneś zaalarmować innerHTML, aby zobaczyć, co to jest przed próbą zrobienia zamiany ciągu znaków. Następnie użyłbym prawidłowego wyrażenia regularnego do wykonania zamiany.Najprawdopodobniej będziesz musiał uciec z ukośnika za pomocą odwrotnego ukośnika. Nie sądzę, że musisz uciec od nawiasów ostrych, ale nie jestem w 100% na tym.

Również z mojego doświadczenia wynika, że ​​metoda DOM (nowa opcja) jest wolniejsza. Kiedy trzeba zastąpić dużą liczbę opcji, jest znacznie wolniej. Jeśli musisz tylko wymienić jeden lub dwa, możesz użyć metody DOM.

Answer 6

Sprawdź to

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

jeśli to nie działa zmienić przeglądarkę.

Answer 7

Rozwiązanie wypracowałem idzie następująco

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; 
} 

Ciąg HTML można uzyskać za pomocą żądania AJAX.

Powoduje to, że przeglądarka przerobi/wyrenderuje pole wyboru z nowo dodanymi opcjami.

Zawiadomienie: & nbsp preciding pierwszy kod opcji Jeśli zostawisz to na zewnątrz, pierwsza opcja straci swoje tagi opcji i do nich nie zostanie pokazany w nowym dodatkiem select-innerHTML