原生JS——select操作技巧

  1. select 常用属性
    multiple: 设置select为多选
    size: 当设置了multiple属性,通过size可以设置select固定可见行数;
    disabled: 将select中某个option设置为不可选中状态;
    name: 表单传输过程中的key值;
    form: 指定select与表单关联的元素(id相同),可以使得表单传输项位于DOM任意位置,而非一定要是表单元素的子元素;
  2. select常用操作
    1)获取选中元素
    通过selectedIndex获取到被选中元素的序号
// html
    
// js
    var selectEle = document.getElementById("testSelect");
    var index = selectEle.selectedIndex;
    var selectedValue = selectEle.options[index].text;

    console.log(selectEle.length); //3
    console.log(selectEle.item(2)); // 
    console.log(selectEle.namedItem('cat'));// 
    var Macaw = document.createElement("option");
    Macaw.setAttribute("value", "macaw");
    var newContent = document.createTextNode("Macaw"); 
    Macaw.appendChild(newContent);
    selectEle.add(Macaw, 1);// Macaw index为1
    selectEle.remove(2);// cat 被删除

补充:select.options方法、属性

// 属性
length  返回集合的option元素数目
selectedIndex   设置或者返回select对象已选选项的索引值。(以 0 起始)
// 方法
[index] 以数字形式指定元素索引 (以 0 开始)
[add(element[,index])]  在集合中添加option元素
item(index) 以数字索引返回集合中元素
namedItem(name) 以名称为索引返回集合元素
remove(index)   从集合中移除元素

2)设置选中元素
通过遍历select元素,找到需要选中的元素,将其selected属性设置为true

// js 在上面的基础上
    for (var i = 0; i < selectEle.length; i++) {
        if (selectEle.options[i].text === 'Macaw') {
            selectEle.options[i].selected = true;
        }
    }

你可能感兴趣的:(原生JS——select操作技巧)