innerHTML thay thế không phản ánh

Question

Tôi có HTML một cái gì đó như thế này

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

khi tôi sử dụng

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

Các innerHTML được thay thế nhưng nó không nhận được phản ánh trong trình duyệt.

Nếu tôi cảnh báo innerHTML, tôi có thể thấy rằng nó đã được thay đổi ngay bây giờ nhưng trong trình duyệt, nó vẫn hiển thị tùy chọn cũ.

Có cách nào để thực hiện thay đổi này được trình duyệt nhận ra không?

Xin cảm ơn trước.

Answer 1

hoạt động tốt đối với tôi trong Firefox 3,5

Working Demo

EDIT: Bạn phải sử dụng IE. Bạn cần phải tạo một tùy chọn mới và thêm nó vào phần tử, hoặc sửa đổi các văn bản của các tùy chọn hiện

Working Demo - thử nghiệm và làm việc trong FireFox và IE 7.

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

Answer 2

Tôi đoán bạn đang sử dụng IE? Vấn đề là bạn phải sử dụng Option mới (...) để cư trú SELECT trong IE. Như thế này:

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

Edit: Có một bài báo của Microsoft về lỗi này: http://support.microsoft.com/kb/276228

Answer 3

Tốt hơn để cung cấp cho một id cho thẻ lựa chọn và sử dụng tùy chọn mới để thêm một mục.

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

Nếu bạn cần phải thay thế một tùy chọn

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

Answer 4

Bạn đang sử dụng replace yêu cầu đối số đầu tiên là RegEx.

Hãy thử điều này:

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

Điều này làm việc cho bạn?

Answer 5

Đặt innerHTML của một lựa chọn có lỗi trong IE. Không chắc chắn nếu họ cố định điều này trong 7 hoặc 8 được nêu ra. Nó cắt bỏ một số văn bản bạn cung cấp cho nó và do đó có các tùy chọn không đúng định dạng. Vì vậy, bạn phải thiết lập bên ngoàiHTML bao gồm các lựa chọn. Vì externalHTML chỉ là IE (hoặc là), tôi thường sử dụng select.parentNode.innerHTML. Và tôi gán ID cho lựa chọn. Nhưng kể từ khi bạn đang thiết lập innerHTML của div, bạn đã được bảo hiểm. Đó chỉ là một FYI.

Tôi nghĩ rằng vấn đề thực sự của bạn là thay thế được mong đợi một biểu thức chính quy cho đối số đầu tiên. Hoặc yếu tố tùy chọn không phải là những gì bạn mong đợi. IE có thể viết hoa tên tùy chọn và có thể thêm thuộc tính đã chọn. Bạn nên cảnh báo innerHTML để xem nó là gì trước khi cố gắng thay thế chuỗi. Sau đó, tôi sẽ sử dụng một biểu thức chính quy hợp lệ để thực hiện thay thế.Có thể bạn sẽ phải thoát khỏi dấu gạch chéo bằng dấu gạch chéo ngược. Tôi không nghĩ rằng bạn cần phải thoát khỏi các dấu ngoặc nhọn nhưng tôi không phải là 100% trên đó.

Ngoài ra theo kinh nghiệm của tôi, phương thức DOM (tùy chọn mới) chậm hơn. Khi bạn phải thay thế một số lượng lớn các tùy chọn, nó sẽ chậm hơn đáng kể. Nếu bạn chỉ cần thay thế một hoặc hai, bạn có thể sử dụng phương thức DOM.

Answer 6

Kiểm tra này

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

nếu nó không được làm việc thay đổi trình duyệt.

Answer 7

Một giải pháp tôi làm việc ra đi như sau

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

Chuỗi HTML có thể thu được bởi một yêu cầu AJAX.

Kết quả là trình duyệt sẽ viết lại/hiển thị hộp chọn với các tùy chọn mới được thêm vào.

Thông báo các: & nbsp preciding mã tùy chọn đầu tiên Nếu bạn bỏ ra, tùy chọn đầu tiên sẽ mất thẻ tùy chọn của nó và do sẽ không được hiển thị trong mới được thêm vào select-innerHTML