在IE下,包括IE8, 9,不能使用innerHTML对select设置option内容,如下面的代码无法得到预期的结果:

document.getElementById('mySelectId').innerHTML = '<option value="new_value">New value</option>';

这个问题在2003年就已经发布在微软支持网站上,但到IE9依然存在这个问题,微软似乎并不把它当成一个问题,详细请参考:http://support.microsoft.com/kb/276228,该文档提出了几种解决方案。

我倾向于采用文章中提到的第三种方法来替代innerHTML:

var daysNode = document.getElementById('mySelectId');

function updateOptions () {

	while ( daysNode.firstChild ) {
		daysNode.removeChild( daysNode.firstChild );
	}

	for (var i = 1; i < 10; i++) {
		var options = document.createElement('option');
		options.setAttribute('value', i);
		options.appendChild(document.createTextNode(i));
		daysNode.appendChild(options);
	}
}

完整示例请参考:http://code.google.com/p/mixedlab/source/browse/trunk/javascript/ie_select_dom.html