What problem are you trying to solve?
Cloning the content of the currently selected option element into a container outside of the select element. This would be useful when using select as a listbox inside of a dialog instead of a drop-down select, like this:
<button commandfor=dialog command=show-modal> <!-- This should work, but isn't supported --> <selectedcontent></selectedcontent> </button> <dialog> <!-- The author can add a filtering input here, which they wouldn't be able to in a drop-down select. --> <input> <select size=4> ... </select> <!-- The author can add buttons here, which they wouldn't be able to in a drop-down select. --> <button>clear</button> </dialog>
What solutions exist today?
Cloning the contents of the option element with script every time the selected option changes
How would you solve it?
Create an attribute which connects a select element and a selectedcontent element without DOM nesting:
<selectedcontent id=myselectedcontent></selectedcontent> <select size=4 selectedcontentelement=myselectedcontent> ... </select>
Anything else?
This has been discussed in openui here: openui/open-ui#1063