动态添加select的option （转）

动态添加select的option （转）

  (2012-11-21 10:42:08)

转载▼

标签：  it

 

动态给select标签添加option，结合前人经验以及自己经验，现在总结三种方法供大家参考，一起交流学习！

首先是定义的select元素：


//根据ID获得select元素
var mySelect = document.getElementByIdx_x("mySelect");
方法一：
通过new Option(value,text)函数，第一个参数是显示的文字，第二个参数是value值，如果需要添加其他属性，可以这样：
var opp = new Option("aaa","001");
opp.name = "option1";
//将option添加到select标签里面
mySelect.add(opp);
//添加完成

方法二：
通过document.createElement_x（）来创建选项，然后再设置选项的属性。在这里w3c标准是可以设置option的label属性即为显示文本，但事实证明FF并不支持，只是给option增加了一个label属性。而w3c中定义的readonly的属性text，在FF中却可以设置。那么是否需要判断浏览器类型呢？当然不用，该方案代码如下
var option = document.createElement_x('option');
try{
// 二级DOM中该属性为readonly，但FF确可写，且可显示为选项内容
option.text = “aaa”；
}catch(e){
// IE支持label，可以直接显示为选项的文字
option.label = "aaa"；
}
option.value = "001"；
// 如果不传第二个参数，FF下会报错
mySelect.add(option, null);

这里要注意的add()函数的第二个参数，该参数为before，可以指定选项插到哪个选项之前，如果为null则插到最后。如果不指定这个参数在IE系不会有问题，FF下会报错，提示Not enough arguments,参数不足，所以最好传个null先。

方法三：
比较少用于select元素上，IE下是无效的，但是动态添加其他元素的孩子时经常用到。当然也可以设置元素属性后appendChild(),同方案二。这里要先把select隐藏掉，这样可以减少浏览器重绘次数，对于display='none'的元素的操作不会引起重绘或回流。再改变完之后再显示出来：

//首先设置select元素不可见
mySelect.style.display = 'none';
//给select元素添加option选项
mySelect.innerHTML += '

';
//最后将select元素设置可见
mySelect.style.display = 'block';


OK!!!
这三种方式最常用的就是第一种了，没有兼容性问题，其他两种只是在此作为例子，展示创建option的方法。

动态删除select中的所有options：
document.getElementByIdx_x("ddlResourceType").options.length=0;

动态删除select中的某一项option：
document.getElementByIdx_x("ddlResourceType").options.remove(indx);

动态添加select中的项option:
document.getElementByIdx_x("ddlResourceType").options.add(new Option(text,value));

兼容IE和FF的Javascript动态添加Select控件的Option选项

看了很多Javascript的书籍，发现对Select可以使用add方法添加Option选项。
selectObj.add(new Option("Label", "Value"));
但是add方法好像只在IE下好用。现在提供一个通用的方法：
selectObj.options[selectObj.length] = new Option("Label", "Value");
另外如果想还想使用add方法，可以写成如下格式：
selectObj.add(new Option("Label", "Value"), null);
请注意，在IE6及IE7下请使用不带null参数的add方法，在FF下请使用带null参数的方法，IE8下带不带都可以。
很奇怪为什么一定要加null，我猜测add方法里一定使用了'=== null'来判断第二的参数或者没有对参数数组的长度做验证