Use option:checked to find the currently selected option:

select.querySelector('option:checked')

Yes, :checked, not :selected.

This is the same as finding an option with the { selected: true } property in JavaScript:

select.querySelectorAll('option').find((option) => option.selected)

What about the `selected` attribute?

Note that option[selected] would only find an <option selected> tag. This may be the selected option right after loading the page, but not once the user switched to a different value. It also won't work in JavaScript-heavy applications where you might not be rendering an option tag with the selected attribute in the first place.

Arne Hartherz

makandra.com

Say thanks

Last edit

2021-12-13

Henning Koch

License

Source code in this card is licensed under the MIT License.

Async control flow in JavaScript: Promises, Microtasks, async/await

Slides for Henning's talk on Sep 21st 2017.

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

print('script start')
html = get('/foo')
print(html)
print('script end'...

Posted by Arne Hartherz to makandra dev (2021-12-09 10:51)

Selector for finding the currently selected option in a <select> tag

What about the selected attribute?

Related cards:

Introduction

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

Summary

What about the `selected` attribute?