【www.bbyears.com--班主任工作总结】
昨天，在项目中碰到了option显示异常的原因，截图如下：
Firefox中用css控制之后效果
chrome和IE中css不奏效
代码：
代码如下
调试了很久，在网上也找了方法，最终无果，只要去请教大牛了。大牛建议我去查看一下源代码，是不是样式改变了？这段代码的select部分没有任何样式，怎么会多？看了源代码之后，样式的确没有多，但是每个option后面多了一个.又回头看了代码，才明白，我把写在了内循环中，按照我的逻辑，本应该放在外循环。调整之后，一切正常。
补充一个:
select 是列表型元素中的一个很重要的代表。总结下他的一些书写注意事项。
1.关于innerHTML ，在ie下不支持innerHTML的形式添加option选项，firefox，chrome是支持的。
2.添加option，使用 ele.options.add(option) ,但是这里的option 可以是new Option(text,value)的形式构造的，也可以是通过
原生的函数document.createElement函数创建的。此外add的方式不会覆盖以前的。option不能是html的形式。
3.选定特定的一个option的方式 ele.value = option.value;反之，如果当前是特定的option的话，
那么ele的值一定就是option.value;
4.获得选定的option的值还有另一个方式（我不太推荐）ele.options[ele.selectedIndex].value，这个尽管复杂一点，但是说明一个问题，
即列表型元素的列表项有一个索引的概念。
代码如下
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function render(){
for(var i = 0 ;i < 100;i++){
var ele = document.createElement("option");
ele.text ="etcyby" + i;
ele.value = i;
$("test").options.add(ele);
}
$("test").value = "99"
//alert($("test").options[$("test").selectedIndex].value);
}
function render2(){
$("test").innerHTML = "";
}
render();
</script>