Question

我刚刚发现在FF中，如果你在SELECT元素中动态创建一个OPTION DOM元素并且只是设置它的innerHTML，它会设置innerHTML，即显示的文本以及OPTION的值。

var opt = document.createElement（'OPTION'）; opt.innerHTML ='选择';

这也设置了“value”属性。

这是正确的行为吗？我无法为IE复制此内容。

Answer 1

如果没有为value属性专门设置不同的值，则默认为选项中的文本。

innerHTML属性更改value属性的行为是否正确无法说明。 innerHTML属性不在标准范围内，因此如果有任何正确的行为，则根本不支持该属性。

您应该使用text属性来设置选项的文本，这是标准中指定的属性。

Answer 2

据我所知，正在发生的事情是，如果您检查选项的属性值

alert(opt.value);

它将返回值属性值（如果存在），但会返回选项标记中包含的值作为回退。在您的示例中，您可以使用

单独设置value属性

opt.value = "some value"

如果这样做，value和innerHTML值将返回独立值。

Answer 3

innerHTML在这里没有很好地定义。

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

由于没有公开规范对于此属性，实现差别很大。例如，当文本输入文本输入，IE会更改的value属性输入的innerHTML属性，但Gecko 浏览器没有。

您可以使用类似以下代码的内容将选项元素添加到select元素：

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
}

下拉选项集innerHTML也设置了值

3 个答案: