plusFormSelect

This method converts a normal html <select> menu into a custom stylable menu. Events on the custom menu are reflected on the original <select> menu and therefore work seamlessly on top of any form.

onClick, onChange, onBlur, onInit and onMousedown callbacks exist for developers to extend the default plugin functionality.

Typical usage

$('select').plusFormSelect();

Default options:

These are the default options and the typical usage applies these by default. Any object, property or method that is changed here will overwrite the default version.

$(el).plusFormSelect({
  namespace: 'plusui-form-select',
  elAttrNames: { // Attr names without a namespace
    typeDefault: { // Attr names for the custom dropdown menu
      'defaultClass': '--default'
    },
    typeCustom: {
      'defaultClass'    : '--custom',
      'dataSelected'    : '-selected',
      'listClass'       : '__list',
      'itemClass'       : '__item',
      'activeItemClass' : '__item--active',
      'firstItemClass'  : '__item--first',
      'lastItemClass'   : '__item--last'
    },
    'elClass'            : '-element',
    'fauxElClass'        : '',
    'activeClass'        : '--active',
    'mousedownClass'     : '--mousedown',
    'disabledClass'      : '--disabled',
    'dropdownButtonClass': '__dropdown-button',
    'placeholderClass'   : '__placeholder',
    'dataName'           : '-type'
  },
  defaultDropdown: false,

  // API
  // In the callback functions, the $el parameter is the jQuery object of the 
  // original select element and $fauxEl is the jQuery object of the custom version
  onInit: function($el, $fauxEl, options){}, // Callback that fires after method has   initialized
  onClick: function($el, $fauxEl, options){}, // Click event callback
  onChange: function($el, $fauxEl, options){},// Change event callback. defaultDropdown: true only
  onMousedown: function($el, $fauxEl, options){}, // Only enabled for defaultDropdown: false
  onBlur: function($el, $fauxEl, options){} // Only used for defaultDropdown: true
})

The nameSpace property is used to prepend the HTML attribute names - This allows to easily use multiple form elements on a page without CSS conflicts and specificity wars.

Options explanation

namespace, elAttrNames and the callback functions are explained in more detail on the wiki home page.

defaultDropdown

This option layers the default browser select (with opacity 0) on top of a custom placeholder which reflects the value selected by the default dropdown. This essentially acts as a custom <select>, however still uses the default dropdown <option> list.

This is a great option for mobile devices since native dropdown list functionality isn't removed.