How to give web user ability to select an option – or add one?

Question

My web application has a half dozen fields where the user is allowed to select from a list of existing values – or enter a new one.

Initially, I included an option called "Other…". When chosen, a new field would slide in, allowing the user to enter a new value. That worked ok with one field, though it felt a little clunky. Now I want to use the same technique for 6 fields, and it's getting harder to manage all the extra "Other…" fields, plus all the extra programming for managing the Other Values.

For a while now, I've been using the Koenpunt fork of the Chosen library, which allows the user to enter new values in the same field. That works ok in general. But recently, I've wanted to add some validation – either via the HTML5 required attribute, or the jQuery Validation library. Since Chosen hides the original SELECT field, the error messages either don't show up, or show up in the wrong places. I've used some of the workarounds, but I feel like I'm applying patches to patches to patches. You can see both the Other… and the Chosen methods in action in my test app: http://chosen-modality.herokuapp.com/

It seems like this pattern isn't all that strange, but I haven't seen any examples in other apps – and I've been keeping an eye out for over a year. Any ideas on a good way to handle this select-or-add capability?

Answer 1

I like how WordPress provides an easy access to a list of already used categories, but also makes it possible to quickly add a new one:

(The "+Ajouter une période" button actually toggles the form right below).

Answer 2

Here's a solution I've used before:

^{download bmml source – Wireframes created with Balsamiq Mockups}

In this case, this allows the user to add and remove items.

Answer 3

Very good question, I had the same request from one of my clients and what I actually did was that I created a toggle button beneath the select option to create a new category (text) or revert back in-case they change their mind :)

During the toggle, I had to make some changes to the name attribute e.t.c.

My client loves it...