Why is <select multiple> so poorly implemented?
over 7 years ago from Shrihari Sankaran, 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?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now