解决IE8下select标签的innerHTML无法赋值问题

解决IE8下select标签的innerHTML无法赋值问题
笔者近期开发了一套B/S架构的软件，其中用到了ajax 动态读取excel文件的首行，并更新在网页中进行展示。

最初设想是前台页面中建立一个空白的select标签，用户点击网页中的按钮时向服务器发送请求获取excel文件的首行，再对select标签的innerHTML赋值。

这种方法在IE10、chrome浏览器下都能正常运行，但是在IE8下却无法正常显示。

故障排查
因为是浏览器不同导致的故障，怀疑是浏览器兼容性引起的问题。

于是打开IE8浏览器的开发人员工具，进行了调试。

首先在为select标签的innerHTML赋值的语句前设置断点，然后启动调试，查看赋值是否正常，显示如下：
说明赋值正常，但是页面上仍无法显示select标签中的内容，调试js的控制台也不报任何错误。

查看网页的源代码，显示如下：
表明select标签下无任何内容。

Select标签的innerHTML作为局部变量能够赋值，但是赋值的语句执行完
后，页面没有随之更新，于是怀疑是select标签不支持innerHTML进行赋值。

对js代码进行了修改，通过ajax获取到数据后，创建一个新的select对象，然后将网页中的select进行替换。

代码如下：
var selectobj = document.createElement('select');
selectobj.innerHTML = contentReceived;
obj.parentNode.replaceChild(selectobj, obj);
仍然无法正常显示。

于是再查阅相关资料，找到如下表述：
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.
意思是col、colGroup、frameSet、html、head、style、table、tBody、tFoot、tHead、title、tr标签的innerHTML 是只读的。

但这里并没有提到select标签。

在网上检索相关资料，发现有网友指出select标签也存在同样的问题，故障原因终于找到了。

解决办法：
原因找到了解决就比较容易了，既然select标签的
innerHTML是只读的，那么在select上层放置一个div标签，然后在服务器端根据excel文件的首行生成select标签的html代码，在前台页面中用ajax获取到该html代码后，通过更新上层div的innerHTML的方法，实现select标签内容的显示，问题终于得到解决。

经验总结
浏览器的兼容性一直都是从事前端设计不可避免的问题，而IE浏览器不同版本间的差异也很大，在开发完成后，应使用多个浏览器进行测试。

本次是查阅了微软的相关文档才顺利解决问题，现将这次的故障排查过程分享给大家，希望对大家以后解决此类问题有所帮助。