使用 querySelectorAll 获取选定的选项答案

【问题标题】：Getting selected options with querySelectorAll使用 querySelectorAll 获取选定的选项
【发布时间】：2013-03-13 06:25:51
【问题描述】：

我想知道是否可以在 Javascript 中使用 Selctors API 来获取 <select multiple> 字段中当前选定的选项，而不是对所有选项进行“愚蠢”迭代。

select.querySelectorAll('option[selected="selected"]') 仅返回在原始 HTML 中标记为预选的选项，这不是我想要的。有什么想法吗？

【问题讨论】：

我认为您唯一的选择是遍历所有 option 元素并过滤掉未选择的元素。

标签： javascript html-select selectors-api

【解决方案1】：

document.querySelectorAll('option:checked')

甚至可以在 IE9 上运行；)

【讨论】：

Should work with 9.0，浏览器兼容性在底部
如果 jQuery 是一个选项，那么您可以使用 :selected 选择器

【解决方案2】：

我也遇到过你的问题，我感觉这与 JavaScript 无法识别 DOM 中的变化有关。

这里有一个解决方案：

jsFiddle

document.getElementById('test').onclick = function () {
    var select = document.getElementById('select');
    var options = getSelectedOptions(select);
    console.log(options);
};

function getSelectedOptions(select) {
    var result = [];
    var options = select.getElementsByTagName('option');
    for (var i = 0; i < options.length; i++) {
        if (options[i].selected)
            result.push(options[i]);
    };
    return result;
}

【讨论】：

JS 可以识别 DOM 的这些更改。问题是selected DOM 属性是不可序列化的。 selected 属性对应于defaultSelected DOM 属性，因此在[selected] 中查询该属性将返回将defaultSelected DOM 属性设置为true 的元素。

【解决方案3】：

如中所述

https://www.w3schools.com/jsref/prop_select_selectedindex.asp

你可以得到当前选择的索引 selectObject.selectedIndex

它还在change eventListener 中发生变化。

例如：

id_selected = document.querySelector('#sel').selectedIndex;
console.log(document.querySelector('#sel')[id_selected]);

【讨论】：

我认为最后一行可能需要console.log(document.querySelector('#sel').options[id_selected]);