web-dev-qa-db-ja.com

querySelectorAllで選択したオプションを取得する

JavaScriptで、すべてのオプションに対する「愚かな」反復ではなく、Selctors APIを使用して_<select multiple>_フィールドで現在選択されているオプションを取得することは可能ですか?.

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

23
GOTO 0

document.querySelectorAll('option:checked')

IE9でも機能します;)

47
a better oliver

私もあなたの問題を経験しました、それは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;
}
1
Daniel Imms