How to create dropdown list with “new value” option?

Question

I would like to create a dropdown list where the last option will be to enter a new value. How could I create this ?

Is there any jQuery plugin that provides such thing ?

Answer 1

There is no Html element that can do what you are looking for natively.

However as a workaround, you can bind a change event handler to your dropdown list. The rest depends on how exactly you would like the user to enter the new value:

$("#theList").change(function (e) {
                    //open a thickbox asking for the value, convert the dropdown list to a regular input or whatever...
                });

Note that some browsers raise an onchange event when the listbox is changed, others only when it's change and loses focus. So you might also want to listen to mousedown and keydown events if you want your UI to provide a consistent behavior.