Editable Select lists are a useful feature offered by JQuery through the JQuery-Ui ComboBox widget.
In an earlier article I explained how to set up a basic JQuery ComboBox widget, which I will expand on in today’s article.
So what is this article about? Bottom line is that I wanted to create something that looks like the above image, except that I wanted the duplication area to remain hidden when the form was to be submitted. How it should work is that as a user either types into the editable select list, or selects a value from the list of options, the text entered/selected should immediately be duplicated to a hidden area. For demonstration purposes, though, I have left the duplication area visible so that you can see the logic in action.