原生JS——select操作技巧

1. select 常用属性
   multiple: 设置select为多选
   size: 当设置了multiple属性，通过size可以设置select固定可见行数；
   disabled: 将select中某个option设置为不可选中状态；
   name: 表单传输过程中的key值；
   form: 指定select与表单关联的元素（id相同），可以使得表单传输项位于DOM任意位置，而非一定要是表单元素的子元素；
2. select常用操作
   1）获取选中元素
   通过selectedIndex获取到被选中元素的序号

// html
    <select id="testSelect">
        <option value="dog">Dog</option>
        <option value="cat" name="cat">Cat</option>
        <option value="goldfish" selected>Goldfish</option>
    </select>

// 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)); // <option value="goldfish" selected="">Goldfish</option>
    console.log(selectEle.namedItem('cat'));// <option value="cat" name="cat">Cat</option>
    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;
        }
    }