jQuery: other_select

/*
* @author jnf http://github.com/jnf
* other_select, when attached to a select box, pops a sibling input field with similar
* attributes. Use it to record user input that falls outside the options provided in a
* select box.
*/
$.fn.other_select = function(options) {
  var defaults = {
    speed: 'normal', //rate at which the alternate input field appears/disappears
    nameSuffix: '_other', //suffix appended to the alternate input's name attribute
    idSuffix: '_other', //suffix appended to the alternate input's id attribute
    title: 'Other', //title text for the alternate input
    className: 'input', //need a specific class on the input? assign it here
    type: 'text', //it doesn't have to be a text field, but it probably should be
    popValue: 'other' //this is the value in the select options that pops the alternate input
  };
  
  var options = $.extend(defaults, options);
  
  $(this).each(function() {
    var $this = $(this);
    $this.bind('change', function() {
      if ( $this.val() == options.popValue ) { //user selected "Other" -> Pop the alternate input
        if( $this.siblings("#" + $this.attr('id') + options.idSuffix).size() == 0 ) {
          //we don't have the sibiling selector built, so lets build it
          var inputString = "<input style='display: none;' id='"
            + $this.attr('id') + options.idSuffix
            + "' type='" + options.type
            + "' name='" + $this.attr('name') + options.nameSuffix
            + "' title='" + options.title
            + "' class='" + options.className + "' />";
          //and now lets insert it after the select box
          $this.parent().append(inputString);
        }
        //show it!
        $this.siblings("#" + $this.attr('id') + options.idSuffix).fadeIn(options.speed);
      } else { //user selected a provided value -> Hide and clear the alternate input, if it exists
        if ($("#" + $this.attr('id') + options.idSuffix)) {
          $("#" + $this.attr('id') + options.idSuffix).fadeOut(options.speed).val('');
        }
      }
    });
  });
};