来看看select是个什么东东

作者 BiYuqi 日期 2017-01-23
来看看select是个什么东东

关键词:select option options selectedIndex remove add

属性

  • options:返回包含下拉列表中的所有选项的一个数组
  • name:设置或返回下拉列表的名称。
  • selectedIndex:设置或返回下拉列表中被选项目的索引号。
  • add():向下拉列表添加一个选项。
  • remove():从下拉列表中删除一个选项。
  • onchange:当改变选择时调用的事件句柄。

实战

HTML结构

<select class="s1">

</select>

selectedIndex, options, onchange

写的时候注意不要写的错单词:

var s1 = document.querySelector('.s1');
s1.onchange = function(){
    //当前选中option 所在索引
    //也可写成this.options.selectedIndex
    console.log(this.selectedIndex);
}

add()

动态的添加option

/*
* elem selector的id 或者 clas
* obj 要添加的option选项 提供批量添加
    格式:[
            {con:"option文本值",item:"option value值"},
            {con:"option文本值",item:"option value值"}
        ]
*/
function addOption(elem,obj){
    var el = document.querySelector(elem);
    for(i in obj){
        var op = new Option(obj[i].con,obj[i].item);
        el.add(op);
    }
}
//测试
var obj = [
    {con:"微信",item:"-1"},
    {con:"支付宝",item:"-2"},
    {con:"银联",item:"-3"},
    {con:"拒绝",item:"-5"},
    {con:"接受",item:"-6"}
];
//调用
//可以在浏览器跑跑看效果了
addOption('.s1',obj);

enter description here

remove()

动态的删除指定option

/*
* elem selector的id 或者 class
* obj  要添加的option选项 提供批量删除
*      可根据需要 更改函数 指定删除匹配的option文本
*      本文默认匹配option  value值
*      格式一 字符串 value值  "-3" 目前只支持一个
*      推荐:格式二:[
*             {val:"option value值"},
*            {val:"option value值"},
*            {val:"option value值"}
*         ]
*/
function removeOption(elem,opText) {
    var el = document.querySelector(elem);
    for(var i=0;i<el.options.length;i++){
        if(typeof opText === 'string'){
            //此处可根据需要改成匹配 text
            //el.options[i].text 即option文本值
            //string 仅支持一次删除一个
            if(el.options[i].value === opText){
                el.options.remove(i);
            }
        }
        if(typeof opText === 'object'){
            for(j in opText){
                //此处可根据需要改成匹配 text
                //el.options[i].text 即option文本值
                if(el.options[i].value === opText[j].val){
                    el.options.remove(i);
                }
            }
        }
    }
}
//测试 上文中添加的value 值
//推荐使用对象,可批量删除
var text = [
    {val:"-1"},
    {val:"-2"}
];
//调用
//可以在浏览器跑跑看效果了
removeOption('.s1',text);

enter description here

item(index)

用来选择option

var s1 = document.querySelector('.s1');
s1.item(0);//选中第一个option

Reference