Getting selected options with querySelectorAll

Question

I wonder if it's possible in Javascript to get the currently selected options in a <select multiple> field using the Selctors API rather than a "stupid" iteration over all options.

select.querySelectorAll('option[selected="selected"]') only returns the options that were marked as preselected in the original HTML, which is not what I'm looking for. Any ideas?

I think your only option is to iterate over all `option` elements and filter out the ones that are not selected. — Felix Kling, Mar 23 '13 at 12:16

score 69 · Accepted Answer · answered Mar 23 '13 at 14:26

69

document.querySelectorAll('option:checked')

Works even on IE9 ;)

answered Mar 23 '13 at 14:26

a better oliver

26,330
2
58
66

[Should work with 9.0](https://developer.mozilla.org/en-US/docs/CSS/:checked), Browser compatibility at the bottom – a better oliver Mar 23 '13 at 15:22
If jQuery is an option then you could use the `:selected` Selector – a better oliver Mar 23 '13 at 15:26
Thanks for sharing. The tramp here is that works with "checked" and not "selected" – Sergio Abreu Jul 10 '22 at 12:05

Daniel Imms · Answer 2 · 2013-03-23T12:30:58.103

-1

I was also experienced your issue, I have a feeling it's to do with JavaScript not recognising changes in the DOM.

Here is a solution:

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

edited Mar 23 '13 at 12:30

answered Mar 23 '13 at 12:10

Daniel Imms

47,944
19
150
166

2

JS recognizes these changes to the DOM. The problem is that the `selected` DOM property is non-serializable. The `selected` attribute corresponds to the `defaultSelected` DOM property, so querying for the attribute as in `[selected]` will return elements that have `defaultSelected` DOM property set to `true`. – Fabrício Matté Jul 14 '13 at 06:38

score -1 · Answer 3 · answered Jan 07 '22 at 12:34

-1

As described in

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

you can get the currently selected index with selectObject.selectedIndex

It also changes in a change eventListener.

For example:

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

answered Jan 07 '22 at 12:34

Donapieppo

157
2
6

I think that last line may need to be `console.log(document.querySelector('#sel').options[id_selected]);` – Kirkman14 Feb 28 '22 at 21:40

Getting selected options with querySelectorAll

3 Answers3

Linked