josepharhar · GitHub

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

Read the original on github.com ↗