# Selecter

#### A jQuery plugin for replacing default select elements.

Replace those boring default select elements with something a little nicer. Selecter also integrates with Scroller, giving you complete control of your project's UI. Oh, and they play nice with that shiny new responsive layout (try resizing this window).

Download on GitHub

## Configuration

Option | Default | Description
--- | --- | ---
`callback` | `function() {}` | Function fired when user makes a selection
`cover` | `false` | Set option list to cover handle
`customClass` | `""` | Class added to Selecter element
`defaultLabel` | `false` | Text to display on initialization
`links` | `false` | Options act as jump-links and open in a new window
`externalLinks` | `false` | Options act as jump-links and open in the same window
`trimOptions` | `false` | Number of charachters to display; Automatically truncates

## Methods

Method | Params | Description
--- | --- | ---
`defaults` | `{}` | Set default options
`enable` | `` | Enable the field
`disable` | `` | Disable the field
`destroy` | `` | Remove all traces of Selecter

## Examples

### Basic

The most basic method is simply applying the Selecter plugin:

    $("select").selecter();

##### Demo

### Option Groups

Selecter automatically detects optgroup tags, allowing you to style groups:

    $("select").selecter();

##### Demo

### Multiple

Selecter will also automatically detect mutiple select elements:

    $("select").selecter();

##### Demo

### Default Label

The default label will be displayed on initiallization instead of the selected element.

    $("select").selecter({
    	defaultLabel: "Select An Item"
    });

##### Demo

### Links

The options can also be links, think "jump navigation":

    $("select").selecter({
    	links: true
    });

##### Demo

### External Links

The links can also open in a new window or tab:

    $("select").selecter({
    	externalLinks: true
    });

##### Demo

### Cover

The options list can cover the handle, sort of Safari-style:

    $("select").selecter({
    	cover: true
    });

##### Demo

### Mobile

The mobile pop-up has been removed as of version 1.9.3, instead Selecter allows the mobile browser to handle all interactions. This ensures a better experience for the user and simplifies mobile development, making Selecter the perfect way to style a select element consistently across all browsers.

### Class

Define a custom CSS class to have multiple visually distinct Selecters on the same page:

    $("select").selecter({
    	customClass: "custom"
    });

##### Demo

### Callback

The function passed as a callback will receive the newly selected value as the first parameter:

    $("select").selecter({
    	callback: selectCallback
    });

    function selectCallback(value, index) {
        alert("OPTION SELECTED: " + value + ", INDEX: " + index);
    }

##### Demo

### Disabling

Selecter will automatically detect disabled fields, but you can always manually trigger the disable or enable event:

    $("select").selecter("disable");

    $("select").selecter("enable");

##### Demo

Enable Disable

## Compatibility

- Requires jQuery 1.7+
- Tested in Firefox, Chrome, Safari, IE8+

## License

Released under the MIT License. Feel free to use it in personal and commercial projects.

Coffee

Caffeine fuels the mind, why not ?