下拉选项设置innerHTML设置值
问题描述:
我刚刚发现在FF中,如果您在SELECT元素内部动态创建OPTION DOM元素,并设置其innerHTML,则会设置innerHTML即显示的文本以及OPTION的值。下拉选项设置innerHTML设置值
var opt = document.createElement('OPTION'); opt.innerHTML ='选择';
这设置了“值”属性以及元素。
这是正确的行为?我还没有能够复制这个IE浏览器。
答
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
}
答
发生了什么事,据我的理解是,如果你检查的选项
alert(opt.value);
,如果它存在这将返回值属性值的属性值,但将返回值包含在选项标签中作为后备。在你的例子中,你可以独立设置值属性
opt.value = "some value"
如果你这样做,值和innerHTML值将返回独立的值。
答
如果您没有专门为value
属性设置不同的值,则默认为选项中的文本。
无论是正确的行为还是对于innerHTML
属性改变value
属性都无法说明。 innerHTML
属性没有被标准覆盖,所以如果有什么是正确的行为,它将不会支持该属性。
您宁愿使用text
属性来设置选项的文本,该选项是标准中指定的属性。