下拉选项设置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属性来设置选项的文本，该选项是标准中指定的属性。