IE和FF中select.innerHTML

无意中用到一个js的应用，ajax新建一个相册，新建完在选择选择select下拉框中出现：

随手写了个土办法，'check-photo-id'架在select标签上：

 

Dom.get('check-photo-id').innerHTML = Dom.get('check-photo-id').innerHTML + '<option value='+_ss[1]+' selected >'+_ss[2]+'</option>'; 

 

测试下：FF下面工作正常，而IE7下面显示空白。

google下：发现这是IE的一个bug，做个简单的测试例子：

 

<script lanuage="JavaScript"> var tmp; for (var i = 1; i <= 10; i++) { tmp += "<option>" + "1" + "</option>"; } var select = document.getElementbyId("id"); select.innerHTML = tmp; </script> 

 

alert一看：01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option> <option>08</option><option>09</option><option>10</option><option>11</option><option>12</option>

少了个“<option>”，难怪显示不出来了！

 

找了个土办法来解决，既然select的innerHTML有问题，那么就在select的父节点上进行innerHTML吧！

 

Dom.get('select-photo').innerHTML = '<select name=\"photo_id\" id=\"check-photo-id\">' + Dom.get('check-photo-id').innerHTML + '<option value='+_ss[1]+' selected >'+_ss[2]+'</option>' + '</select><span class=\"photo-operate\"><button class=\"button create photo\">创建相册</button></span>'; 

 

 恩，解决！

上面方法不是很安全，用个简单又安全的方法来代替：

var op = new Option("name","value"); op.selected = true; Dom.get('check-photo-id').options[D.get('check-photo-id').options.length] = op;

 

 总结：简单、安全、靠谱！

 

ps:今天又在搞IE的innerHTML的时候发现了个bug，有个p标签，用js给它的innerHTML重置掉！FF没问题，又是IE

居然出了个“未知的运行时错误(unknown runtime error)”提示，google了下：推测在IE下修改p标签的innerHTML属性时，innerHTML值不允许含有区块标签（如：div,p,ul等），so给p标签设置innerHTML这条路是走不通了，建议换成div吧！