1

Why is <select multiple> so poorly implemented?

over 3 years ago from , Product Designer

I'm trying to use this element in a desktop app I'm developing using Electron and React. It's almost unusable for practical purposes. I did some Googling and concluded that no one would give a damn if this element was removed from HTML specs.

Allow me to explain.

<select id="genres" multiple> <option value="Action">Action</option> <option value="Adventure">Adventure</option> <option value="Comedy">Comedy</option> <option value="Crime">Crime</option> <option value="Drama">Drama</option> </select>

I want users to be able to select more than one genre. Hence the <select multiple>

But, there is no way to get a list of selected items.

document.getElementById("genres").value

This property returns only the first selected item. Apparently, the only way to get the list of selected items is to iterate over the options and check for the selected attribute. I did that.

Then I ran into another problem when using this with React. Every time the selection changed, I updated the component's state and then set the value of the DOM element to the component's state. Again, the only way to do this is to manually set the selected attribute of every <option>. But, React doesn't let me do that. React says I must use value or defaultValue on <select> to set the value. I cannot do that because I want to set multiple items as selected.

Am I missing something here? Or, is <select multiple> in need of improvements?

1 comment