原生js操作select,optgroup,options,option对象
2016-12-20 20:35

    对于select对象我们并不陌生,但是要说通过原生Js操作select的话,就有许多人对此很茫然。其实这是由于我们平时实用的少,所以才对select知道的甚少。今天我们就通过一起探讨的方式来讲解一下Js操作select的方法,以及其兼容性。

    创建select元素跟创建其他的dom元素一样,通过createElement就可以实现,其子元素option也可以直接创建。我们看一下代码

var select=document.createElement("select");
var opt=document.createElement("option");
opt.value="0";
opt.text="mooshine";
select.add(opt);

上面这段代码在所有浏览器中都支持,下面我们通过属性遍历来看一下select,optgroup,option的拥有的属性

for(var key in select){
    console.log(key+":"+select[key]);
}

select.png

这贴出来chrome下的截图,其他浏览器也都有这些add,remove,selectedIndex,options属性。

这个for in方法中IE8-下只能遍历出属性,遍历不出dom拥有的方法,所以可以查看IE的chm格式的DHTML文档。

select元素除了拥有普通元素的特性外,还有了几个特殊的特性

1.add //用于添加option,
2.options //option元素的集合,
3.selectedIndex //select中选中的option的序号
4.remove //删除一个option

通过这几个方法可以操作otion元素,既然select拥有其他元素的特性,那么我们是不是可以像其他元素一样通过appendChild来添加option元素呢,

select.appendChild(opt);
//IE8-下不起作用

这种方法中IE8下是不起作用的,如果你不考虑IE8等古董浏览器,可以采用这种方式操作select,虽然IE8-不支持appedChild操作option,但是它却支持removeChild删除option。

除此之外我们还可以通过select.options来操作option元素

//添加option
select.options.add(opt);
//删除option
select.options.remove(opt);
//获取选中的序列
var selid=select.options.selectedIndex;
//获取选中的option
var opted=select.options[selid];
//options可以直接操作序号删除option子元素。
select.options.remove(0);
//还可以设置为null删除对应的子元素。
options[0]=null;

用options进行操作的时候,必须用add和remove方法,它没有普通DOM元素的方法,据说select直接操作option中Firefox下不兼容,但是就我目前电脑上Firefox的版本测试是没有问题的,权且记一下,日后碰到老版本火狐有次问题时可以采用options操作来实现兼容。

我们都知道select中还有一个optgroup子元素用来分组。optgroup跟普通元素一样,可以通过appendChild和removeChild来操作option。

var optg=document.createElement("optgroup");
//option还可以通过这种new的方式创建。
//前面文字,后面是value。在IE,chrome下位置可以互换。
var opt=new Option("one list","5");
//设置label属性在IE8-下才能显示optgroup中option的文字。
   opt.label="onelist";
//也可以用select.add添加optgroup对象
select.appendChild(optg);
optg.appendChild(opt);
//设置option为选中项
options[0].selected=true;
//可以快速清楚select中的option
select.options.length=0;
//还可以用常用的方式清空option选项
select.innerHTML="";

上述代码是optgroup操作的兼容代码,但是其中的option必须设置label属性和text属性一致才可以,不然中IE8-下option不显示文字。

select还有一个multiple属性,可以直接操作设置,这个属性兼容性比较好,此模式下,按住Ctrl键,可以实现select的多选。

下面我们再来说一下select的样式

在IE8以上,select支持color,padding,border,font-size等属性,不支持line-height属性,需要用padding让文字上下居中。

option支持color属性,font-size,IE10一下跟随select文字大小,其他浏览器支持单独设置文字大小。火狐下支持margin设置,还支持css3的transform属性。IE9一下option的颜色会覆盖select文字的颜色。

optgroup跟随select的大小和颜色。

总体来说select对我们的限制还是比较大的,好多css样式都是不能使用的,只能使用浏览器默认的样式。因为这个原因,好多人都喜欢用div来模拟select控件,以达到符合我们要求的页面美观。

有朋友问怎么判断option中含有某个value或者某个text值,这里补一下判断的方法

var options=select.options;
var flag=false;
for(var i=0;i<options.length;i++){
    var val=options[i].value;
    //这里为了兼容IE8-下optgroup中的option
    var text=options[i].text||options[i].label;
    if(val=="2"||text="mooshine"){
            //选中
            options[i].selected=true;
        flag=true;
    }
}
//从上面chrome的截图中,我们可以看到,select还有,0,1,2,3序号,这说明select是一个数组
//既然是数组,那么我们就可以直接循环select了。
for(var i=0;i<select.length;i++){
    var val=select[i].value;
    var text=select[i].text||select[i].label;
    ...
    //进行比对判断
}


    今天就写到这里,有写的不对的地方还望海涵!

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(5384)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1