兼容IE和FF浏览器的Select控件的增加option选项操作

对页面中下拉列表操作时，FF和IE的操作方
法是不同的，这一点需要在使用的过程中加
以注意，在浏览器Select控件的增加option
的方法有很多方法，以下是最常用的，IE和
FF有所不同。
IE提供一个add方法用对Select对象的Option
items进行操作，高版本IE是不允许对Option数组
进行操作，否则会报尚未实现或者对象错误。
但是低版本的IE则支持，操作也与FF类似。
FF则相对简单一点，可以直接对对Option数组
进行操作，操作也相对简单，可以利用数组的
操作方法实现对option的特殊操作，比如清空
只要设置数组长度为0即可。
在IE下可以使用如下方法

var opt = new Option("text" ,"value" ,true , true);
document.getElementById("id").add(opt);

FF等浏览器则使用如下方法

var opt = new Option("text" ,"value");
var sel = document.getElementById("id");
sel.options[sel.options.length]= opt;

综合运用一下可以得到如下代码

//IE?
var isIE = (document.all) ? true : false;
//$ id选择器
var $ = function(id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
function addOption(id, name , value){
 isIE? $(id).add(new Option(name ,value ,true , true)) : 
        $(id).options[$(id).options.length]=new Option(name ,value);        
}
January 27th, 2010 in 技术分享, 源程序 | tags: , , ,

Leave a comment

Your comment