shim-selected-options

shim-selected-options

Tiny HTMLSelectElement#selectedOptions shim for IE.

• Can I use selectedOptions?
• WHATWG: HTML spec
• More conformant shim with IE8 support

Up and running

Get the package from npm:

npm install shim-selected-options --save

And simply require the module:

import "shim-selected-options"

Otherwise, plug it the old-fashioned way:

<script src="https://unpkg.com/shim-selected-options" async></script>

Caveats

While making spec-perfect shim is technically possible, it requires observing DOM subtrees to implement quirks of HTMLCollection, not to mention emulating live collection. For most cases, this solution is fine.

• New object instead of always the same
• NodeList instead of HTMLCollection instance
• Static collection instead of live

See more on collections in WHATWG DOM spec.

Examples

Straightforward for single-value selects:

- let {text} = select.options[select.selectedIndex]
+ let [{text}] = select.selectedOptions

Precise typing for multiple selects:

- let opts = select.querySelectorAll(":checked") // NodeList<Element>
+ let opts = select.selectedOptions // HTMLCollection<HTMLSelectElement>