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

青旅半醒 2023-03-02 13:13 29阅读 0赞

下拉框一般都是单选的, 所以直接通过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是否被选中

// 第一种
    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的值
    }