下拉选项集 innerHTML 也设置值答案

【问题标题】：Dropdown Option set innerHTML sets value as well下拉选项集 innerHTML 也设置值
【发布时间】：2011-01-22 23:58:08
【问题描述】：

我刚刚发现，在 FF 中，如果您在 SELECT 元素内动态创建 OPTION DOM 元素并设置其 innerHTML，它会设置 innerHTML 即显示的文本以及 OPTION 的值。

var opt = document.createElement('OPTION'); opt.innerHTML = '选择';

这也设置了元素的 "value" 属性。

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

【问题讨论】：

标签： javascript html forms

【解决方案1】：

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

innerHTML 属性改变value 属性是否正确尚无定论。 innerHTML 属性未包含在标准中，因此如果有任何正确行为，则根本不支持该属性。

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

【讨论】：

【解决方案2】：

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

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

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

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

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
}

【讨论】：

【解决方案3】：

据我了解，如果您检查选项的属性值

alert(opt.value);

它会返回值属性值如果存在，但会返回选项标签中包含的值作为后备。在您的示例中，您可以使用

独立设置 value 属性

opt.value = "some value"

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

【讨论】：