关于 select 的添加 option 应该注意的问题

最新推荐文章于 2023-11-30 20:21:41 发布

yoyo837837

最新推荐文章于 2023-11-30 20:21:41 发布

阅读量168

点赞数

分类专栏： IE的js兼容文章标签：关于select添加option应该注意的问题

本文链接：https://blog.csdn.net/yoyo837837/article/details/83969200

版权

IE的js兼容专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标准的做法就是 :


<!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">
    <option value="55">就是这样的。</option>
</select>
</body>

<script>
function f(){
    var s = document.getElementById('s');
    for(var i=0; i<10; i++){
        var option = document.createElement('option');
        //s.insertBefore(option,s.options[0]);
        /* 标准做法使用 s.options.add() */
        s.options.add(option)
      /* 非标准做法就是用 insertBefore 或者 appendChild */
      //s.appendChild(option);
       option.text = 'hello' + i;
      //option.innerHTML = 'Hello' + i;
       option.value = i;
  //  s.appendChild(option);
    }
    /* 当且仅当用 s.options.add() 添加项时才有效 */
    s.selectedIndex = 4 ;
}
</script>
</html>

也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1. s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白

2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);

又看了一个牛人的博客，得到了第三种解决方式。

var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT

select.appendChild(op); // 为SELECT 新建一 OPTION(op)

也就是所，你的 op 的text 是通过 appendChild(.... createTextNode ) 来进行的。。
-----------
转自http://www.blogjava.net/CopyHoo/articles/246501.html