select元素的options.add 与 insertbefore的区别

之前写了js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值,提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,比如在设置其selectedIndex属性时,会看到当前被选中的Item,浏览器重新绘画了这个元素。在某些情况下会出现这样的情况:用insertBefore方法添加了多个选项后,设置其selectedIndex不能起到效果,用options.add则不会。他们到底有什么区别呢? 

测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    
<title>Untitled Page</title>
</head>
<body onload="f()">
<select id="s">
    
</select>
</body>

<script>
function f(){
    
for(var i=0; i<10; i++){
        
var option = document.createElement('option')
        
//s.insertBefore(option)
        s.options.add(option)
        option.innerText 
= 'hello' + i
        option.value 
= i
    }
    s.selectedIndex 
= 4
}
</script>
</html>

总结:这也算一个有点奇妙的问题吧。

posted @ 2007-09-02 18:40 布尔 阅读(972) 评论(2)  编辑 收藏 所属分类: Javascript

  回复  引用  查看    
#1楼 2007-09-03 11:56 | ╃小〥斌╄      
遇到过, 当2个div 互相innerHTML 对拷 时候 如果div 内table有列checkbox列 , 那么它打勾的状态赋值不过来。 后来都用clone行解决了。
  回复  引用  查看    
#2楼 [楼主]2007-09-03 18:32 | 布尔      
@╃小〥斌╄
呵呵,看来还是有很多细节的东西需要了解

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-09-02 18:55 编辑过


相关链接: