javascript - 使用 querySelectorAll 获取选定的选项

Question

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

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

Answer 1

document.querySelectorAll('option:checked')

甚至可以在 IE9 上工作；）

Answer 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;
}

Answer 3

如中所述

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

您可以使用 selectObject.selectedIndex 获取当前选定的索引

它还在changeeventListener 中发生变化。

例如：

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