javascript - querySelectorAllを使用して選択したオプションを取得する

Question

<select multiple>Javascriptで、すべてのオプションに対する「ばかげた」反復ではなく、Selctors APIを使用して、フィールドで現在選択されているオプションを取得できるかどうか疑問に思います。

select.querySelectorAll('option[selected="selected"]')元のHTMLで事前選択としてマークされたオプションのみを返しますが、これは私が探しているものではありません。何か案は？

Answer 1

document.querySelectorAll('option:checked')

IE9 でも動作します ;)

Answer 2

私もあなたの問題を経験しました、それはDOMの変更を認識しないJavaScriptに関係していると感じています。

解決策は次のとおりです。

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]);