javascript原生获取多选下拉框选中的值

下拉框一般都是单选的, 所以直接通过document.querySelector('select').value就可以知道选中的值了.

如果只是想判断是否有选中的话还可以通过document.querySelector('select').selectedIndex, 这个属性是一个数字,表明第一个被选中的值的索引, 所以如果返回为-1说明没有option被选中.

如果select添加了multiple属性, 那么可以通过Shift或Ctrl像操作文件一样操作select的选项来多选.

获取多选下拉框的值不能用document.querySelector('select').value, 这个value只会返回第一个被选中的option的值,  document.querySelector('select').selectedIndex也只会返回第一个被选中的option的索引

想要获取多选下拉框的值只能通过遍历每个option的selected属性来判断该option是否被选中

<select multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

// 第一种
var options = document.querySelectorAll('select option');
function getSelected() {
    // 使用闭包将选中的值返回
    var arr = [];
    for(var i = 0, len = options.length; i < len; i++) {
        if(options[i].selected) {
            arr.push(options[i].value);
        }
    }
    return arr;
}
// values 就是选中的值的集合
var values = getSelected();
console.log(values);
values = null;

// 第二种
// selectedOptions已经包含了所有被选中的option
var selectedOptions = document.querySelector('select').selectedOptions;
for(let i = 0, len = selectedOptions.length; i < len; i++) {
    console.log(selectedOptions[i].selected); // 必定是true
    console.log(selectedOptions[i].value);  // 选中的option的值
}