HTML select boxes are limited in their usefulness. Often, for quickly filling in forms I need something like a select, but with an other option that allows me to specify the other value. There are various ways I have seen this solved, but I have one I have worked out that I like quite a bit. Here is a simplistic demo of a transforming select/text input on jsBin Other ways you could solve it:
- Have a separate value to capture the other value. Bonus if you only show that field after ‘other’ value has been chosen, and hide it and clear it if they re-chose with the select… it can be a bit of a chore to keep it all strait and you have to deal with two distinct parameters on the back end as well.
- No select, rather some sort of autocomplete on a text input. Works! And only 1 value to deal with on backend, keeping APIs simple. But, not as friendly for users. Free recall is more work with lower accuracy. Plus you probably want to avoid keyboard use on mobile when possible if you are going for speed.
- Complicated custom select widget using JavaScript. These can work, and can look nice, but the code for them is bloated and fragile. HTML select works pretty well on mobile. Attempted JavaScript mimics tend not to.