jQuery Tutorial: SELECT-to-INPUT Toggle

* I’m having a hard time describing this tutorial in the least amount of words possible. Think about it as a jQuery solution to a select box - input toggle, where if you don’t see the option you want in a given select box, you can write-in your desired option via an input element. - JO *

* Update: I did not anticipate the traffic that this article has been receiving, and as such I am sort of embarrassed by the rather inefficient coding and implementation. Like I said in the post, this was a scaled down, simple solution to a problem that I encountered on a larger project - but that does not make it the best way to go about it countering it.

Read the comments on Ajaxian, where you’ll find more efficient renderings of this code and a Prototype version as well (courtesy of davecardwell and jdalton, respectively) *

Recently, when scripting an application that needed to provide users with the functionality to either select an option from a drop-down list or to enter their own text as an option value for the same data item, I began to think that a solution to this situation was going to unachievable via front-end and behavior-level code alone.

You see, similar form field options also appeared in two other instances within the same form and each had to pre-populate themselves with results from a relational database. Things were starting to get a little murky.

Luckily, by employing jQuery for this project, I was able to solve this issue in a mere dozen or so lines of Javascript coding.

The example I will walk you through below will not feature the back-end database connection or the data pre-load, but alas, if requested, I’ll show how simple it is to cross that bridge after you utilize the following method:

First let’s create our form:

Notice that both the select boxes and their corresponding input elements have the same name attribute. This will be important for toggling between the select and input modes. You can find this same value attached to the id attribute of each select box as well. Again, these are key in the implementation of our model.

If Javascript is disabled, the input box becomes the sole provider of our data input. We can handle non-Javascript situations in any way, shape or form due to jQuery’s ability to separate the behavior level code from our front-end HTML structure. This example is not production level, and as such, I did not make all attempts to allow for maximum progressive enhancement. A quick and dirty accessible workaround would be to keep the input field onscreen while setting the default display of the select box to none, or vice-versa.

Also note that each select box gets the class ‘leader’. This class will be the hook for our onChange() function, which we will use to toggle between the two input options.

And now for the script:

In the most primitive sense, this script checks a given element with a class of ‘leader’ and assigns its name attribute to a variable. We check against that same select box via its id. If the select box was changed to ‘other’, we remove the name attribute from the select box and display the input field. If the select box is set to anything else, we remove the name attribute from the input field.

You may be wondering why I continue to wrap my elements via their attributes rather than using the $(this) selector (as it already is assigned to my select box). While testing a more complex application of this method, the $(this) selector did not provide the functionality I required of it and was therefore dropped for this slightly more verbose workaround.

If you test the script, you’ll notice that it indeed works! However, on document load, the input field is still present.

Let’s fix that:

We’ll use the same skeletal structure of our onChange() function, save for setting it to iterate over each instance of the ‘leader’ class on document load.

In my script I use the fadeIn() and fadeOut() functions, but show() and hide() will work just fine. (What can I say? I’m a sucker for jQuery’s mediocre effects).

So that concludes our tutorial, and with that - there you have it - a simple jQuery solution to your select-input field toggling troubles.

View the Live Demo at Flexible Philosophy.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.