Monday, August 18th, 2008
A simple solution to the “other” problem with select boxes
Category: Examples, JavaScript
, jQuery
, Tip
Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a “select-to-input toggle” that shows and hides a text field when you select “Other”. It overloads the same form name, so the server side gets just one value, and doesn’t know or care if it was in the drop down or typed in. You can try it live here.
This is a simple little solution to the issue that there isn’t a native control to really do the job. What you really probably want here is the ability to drop down and select items, or just type into the select box field itself. This is one reason why people implement auto-complete text fields instead of using select boxes for this case, but wouldn’t it be nice to be able to tag your <select> and be done?
Related Content:
This could be a little more compact and efficient.
This is nice! A Prototype version is actually what I need.. *hint hint*
[label for="selectLeader_2"][/label]
[select id="selectLeader_2" name="selectLeader_2"][/select]
[input type="text" name="selectLeader_2"]
broken by design, is it ?
Hm, there are 2 downsides :
* it implies we always use “Other” text value to require an alternate value. It’s not necessary true, especially when there is a deep need to clarify terms for the user or if you don’t have the ability to chose the “Other” value (with a CMS for example)
* as a complement of the previous point, there is a i18n issue. It won’t work on a i18n site (1 script, 2 languages)
It’s a simple example but there are complex problems besides that ;)
Nice tip however.
@oncletom – I’m sure you could customise it for your particular site structure, but i18n is not an issue as it only looks at the option’s value (e.g., [option val="other"]autre[/option])
a quick port to Prototype:
http://pastie.org/255119
Hey, that’s a great idea, good work.
Disclosure: I currently work for Appcelerator. Here’s an example of how to do it using our WEL (web expression language). Note the same could have been done with a service layer hitting a backend via various langs, but I kept it client-side only.
http://amromousa.com/temp/selector/
..clarification for the above..mainly done client side only because there was nothing to do on the server. :)
@amousa LOVE the fact that your implementation requires zero custom JavaScript! Nice work.