下拉選項設置innerHTML設置值

Question

我剛剛發現在FF中，如果您在SELECT元素內部動態創建OPTION DOM元素，並設置其innerHTML，則會設置innerHTML即顯示的文本以及OPTION的值。

var opt = document.createElement（'OPTION'）; opt.innerHTML ='選擇';

這設置了「值」屬性以及元素。

這是正確的行爲？我還沒有能夠複製這個IE瀏覽器。

Answer 1

innerHTML在這裏沒有很好的定義。

https://developer.mozilla.org/En/DOM/Element.innerHTML

由於有此屬性沒有公開規格 ，實現 有很大的不同。例如，當文本 被輸入到文本輸入中時，IE將 更改 輸入的innerHTML屬性的值屬性，但是瀏覽器不會。

你可以使用類似下面的代碼添加選項元素的選擇要素：

var elOptNew = document.createElement('option'); 
elOptNew.text = 'Insert' + num; 
elOptNew.value = 'insert' + num; 
var elOptOld = elSel.options[elSel.selectedIndex]; 
try { 
    elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE 
} 
catch(ex) { 
    elSel.add(elOptNew, elSel.selectedIndex); // IE only 
} 

Answer 2

發生了什麼事，據我的理解是，如果你檢查的選項

alert(opt.value); 

，如果它存在這將返回值屬性值的屬性值，但將返回值包含在選項標籤中作爲後備。在你的例子中，你可以獨立設置值屬性

opt.value = "some value" 

如果你這樣做，值和innerHTML值將返回獨立的值。

Answer 3

如果您沒有專門爲value屬性設置不同的值，則默認爲選項中的文本。

無論是正確的行爲還是對於innerHTML屬性改變value屬性都無法說明。 innerHTML屬性沒有被標準覆蓋，所以如果有什麼是正確的行爲，它將不會支持該屬性。

您寧願使用text屬性來設置選項的文本，該選項是標準中指定的屬性。