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?

Posted by Dion Almaer at 5:51 am
10 Comments

+++--
3.3 rating from 47 votes

10 Comments »

Comments feed TrackBack URI

This could be a little more compact and efficient.

Comment by davecardwell — August 18, 2008

This is nice! A Prototype version is actually what I need.. *hint hint*

Comment by igitur — August 18, 2008

[label for=”selectLeader_2″][/label]
[select id=”selectLeader_2″ name=”selectLeader_2″][/select]
[input type=”text” name=”selectLeader_2″]

broken by design, is it ?

Comment by Laurent V. — August 18, 2008

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.

Comment by oncletom — August 18, 2008

@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])

Comment by davecardwell — August 18, 2008

a quick port to Prototype:
http://pastie.org/255119

Comment by jdalton — August 18, 2008

Hey, that’s a great idea, good work.

Comment by RobFrontEndDeveloper — August 20, 2008

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/

Comment by amousa — August 26, 2008

..clarification for the above..mainly done client side only because there was nothing to do on the server. :)

Comment by amousa — August 26, 2008

@amousa LOVE the fact that your implementation requires zero custom JavaScript! Nice work.

Comment by MattQuinlan — August 26, 2008

Leave a comment

You must be logged in to post a comment.