jquery.plugin.custom_select.coffee

jQuery.fn.formtasticCustomSelect: (options) ->
   defaults: {
      activeClass:      "active"
      containerClass:   "custom_select_container"
      customClass:      false
      defaultClass:     "custom_select"
      dropdownClass:    "custom_select_dropdown"
      inactiveClass:    "inactive"
      indicatorClass:   "custom_select_indicator"
      linkClass:        "custom_select_link"
      prompt:           "Please make a selection..."
      valueClass:       "custom_select_value"
      rowClass:         false
   }
   settings: jQuery.extend(defaults,options)
      
   this.each( ->
      row: $(this)
      row.addClass(settings.rowClass) if settings.rowClass
      
      select: row.find("select")
      select.hide()
      select.after(
         "<dl class=\""+settings.defaultClass+"\">
            <dt><a href=\"\" class=\""+settings.linkClass+"\"><span class=\""+settings.valueClass+"\"></span><span class=\""+settings.indicatorClass+"\"></span></a>
            <dd>
            <ol class=\""+settings.dropdownClass+"\">
            </ol>
            </dd>
         </dl>"
      )
      
      custom_select: select.next()
      custom_select.addClass(settings.customClass) if settings.customClass
      
      dropdown: custom_select.find("."+settings.dropdownClass)
      select_button: custom_select.find("."+settings.linkClass)
      value_display: custom_select.find("."+settings.valueClass)
      
      if !select.val()
         value_display.html(settings.prompt)
      else
         value_display.html(select.find("option[value="+select.val()+"]").html())
         
      select.find("option").each( ->
         dropdown.append("<li><a href=\"#\" data-value=\""+$(this).attr("value")+"\">"+$(this).html()+"</a></li>") if $(this).html()
      )
      
      select_button.click( ->
         if custom_select.hasClass(settings.activeClass)
            custom_select.addClass(settings.inactiveClass).removeClass(settings.activeClass)
         else
            custom_select.addClass(settings.activeClass).removeClass(settings.inactiveClass)
         false
      )
      
      dropdown.find("a").click( (e) ->
         target: $(e.target)
         select.val(target.attr("data-value"))
         value_display.html(target.html())
         custom_select.addClass(settings.inactiveClass).removeClass(settings.activeClass)
         false
      )
   )
   
   $("body").click( ->
      $("."+settings.defaultClass).addClass(settings.inactiveClass)
      $("."+settings.defaultClass).removeClass(settings.activeClass)
   )

jquery.plugin.custom_select.js

(function(){
  jQuery.fn.formtasticCustomSelect = function formtasticCustomSelect(options) {
    var defaults, settings;
    defaults = {
      activeClass: "active",
      containerClass: "custom_select_container",
      customClass: false,
      defaultClass: "custom_select",
      dropdownClass: "custom_select_dropdown",
      inactiveClass: "inactive",
      indicatorClass: "custom_select_indicator",
      linkClass: "custom_select_link",
      prompt: "Please make a selection...",
      valueClass: "custom_select_value",
      rowClass: false
    };
    settings = jQuery.extend(defaults, options);
    this.each(function() {
      var custom_select, dropdown, row, select, select_button, value_display;
      row = $(this);
      if (settings.rowClass) {
        row.addClass(settings.rowClass);
      }
      select = row.find("select");
      select.hide();
      select.after("<dl class=\"" + settings.defaultClass + "\"> \
<dt><a href=\"\" class=\"" + settings.linkClass + "\"><span class=\"" + settings.valueClass + "\"></span><span class=\"" + settings.indicatorClass + "\"></span></a> \
<dd> \
<ol class=\"" + settings.dropdownClass + "\"> \
</ol> \
</dd> \
</dl>");
      custom_select = select.next();
      if (settings.customClass) {
        custom_select.addClass(settings.customClass);
      }
      dropdown = custom_select.find("." + settings.dropdownClass);
      select_button = custom_select.find("." + settings.linkClass);
      value_display = custom_select.find("." + settings.valueClass);
      !select.val() ? value_display.html(settings.prompt) : value_display.html(select.find("option[value=" + select.val() + "]").html());
      select.find("option").each(function() {
        if ($(this).html()) {
          return dropdown.append("<li><a href=\"#\" data-value=\"" + $(this).attr("value") + "\">" + $(this).html() + "</a></li>");
        }
      });
      select_button.click(function() {
        custom_select.hasClass(settings.activeClass) ? custom_select.addClass(settings.inactiveClass).removeClass(settings.activeClass) : custom_select.addClass(settings.activeClass).removeClass(settings.inactiveClass);
        return false;
      });
      return dropdown.find("a").click(function(e) {
        var target;
        target = $(e.target);
        select.val(target.attr("data-value"));
        value_display.html(target.html());
        custom_select.addClass(settings.inactiveClass).removeClass(settings.activeClass);
        return false;
      });
    });
    return $("body").click(function() {
      $("." + settings.defaultClass).addClass(settings.inactiveClass);
      return $("." + settings.defaultClass).removeClass(settings.activeClass);
    });
  };
})();