Question

I.e. a regular select, but when I choose “Custom”, a text input appears, and I can use that instead, as in this crude drawing:

 [Choice A ^]

becomes

 [Custom   ^] ____________
 [Choice A  ]
 [Choice B  ]
 [Choice C  ]

I can build it, but it’s a common pattern….

Note: I’m not talking about a combo box.

Answer 1

The trickier part here is, that presumably you want the input and select box to both use the same name, so whatever is processing the form data, won’t have to wonder what was selected, but instead just read the value from the one and same name.

My take on this:

var i;
var b = false;
$("select").change(function(){
    if($("option:selected",this).hasClass('custom')){
     i = $('<input />').attr('name','values').insertAfter(this);   
         }else{
          $(i).remove();   
         }
});

$('form').submit(function(e){
    if (!b){
   e.preventDefault();
    if ($(i).length>0){
     $('select').remove();  
    } else{
     $(i).remove();   
    }
     b = true;
    $(this).trigger('submit');
}

});

example: http://jsfiddle.net/niklasvh/Cq59K/ (have a look at the form submission data, uses same name for fields, and doesn’t have duplicate entries i.e. combo box and input box).