jQuery Selectric Selectric ⚡

Fast, simple and light jQuery plugin
to customize HTML selects

Demos View on Github Download (ZIP) Download (TAR)
jquery.selectric.js jquery.selectric.min.js

How to use

1. Make sure to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Include jQuery Selectric:

<script src="js/jquery.selectric.min.js"></script>

3. Put styles in your CSS and change it to your taste :D (please refer to our demo page for more themes and other customizations)



		

4. Initialize jQuery Selectric:

$(function(){
	$('select').selectric();
});

Options

You can pass an options object as the first parameter when you call the plugin. For example:

$('select').selectric({
	maxHeight: 200
});
Option Default Type Description
onBeforeInit
function(element) {}
Function Function called before plugin initialize
onInit
function(element) {}
Function Function called plugin has been fully initialized
onBeforeOpen
function(element) {}
Function Function called before select options opens
onOpen
function(element) {}
Function Function called after select options opens
onBeforeClose
function(element) {}
Function Function called before select options closes
onClose
function(element) {}
Function Function called after select options closes
onChange
function(element) {
  $(element).change();
}
Function Function called when select options change
onRefresh
function(element) {}
Function Function called when the Selectric is refreshed
maxHeight
300
Integer Maximum height options box can be
keySearchTimeout
500
Integer After this time without pressing any key, the search string is reset
arrowButtonMarkup
<b class="button">&#9662;</b>
String [HTML] Markup for open options button
disableOnMobile
true
Boolean Initialize plugin on mobile browsers
openOnHover
false
Boolean Open select box on hover, instead of click
expandToItemText
false
Boolean Expand options box past wrapper
responsive
false
Boolean The select element become responsive
customClass
{
prefix: 'selectric',
postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',
camelCase: true
}
Object Custom classes.
Every class in 'postfixes' should be separate with a space and follow this exact order: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive'
optionsItemBuilder
'{text}'
String or Function Define how each option should be rendered inside its <li> element.

If it's a string, all keys wrapped in brackets will be replaced by the respective values in itemData. Available keys are: 'value', 'text', 'slug', 'disabled'.

If it's a function, it will be called with the following parameters: (itemData, element, index). The function must return a string, no keys will be replaced in this method.
preventWindowScroll
true
Boolean Prevent scroll on window when using mouse wheel inside options box to match common browsers behavior.
inheritOriginalWidth
false
Boolean Inherit width from original element

Events

All events are called on original element, first argument is the original element too. And can be bound like this:

$('select').on('selectric-eventname', function(element){
  // your code
});

eventname can be one of the following:

Event name Description
selectric-before-init Fired before plugin initialize
selectric-init Fired plugin has been fully initialized
selectric-before-open Fired before select options opens
selectric-open Fired after select options opens
selectric-before-close Fired before select options closes
selectric-close Fired after select options closes
selectric-change Fired when select options change
selectric-refresh Fired when the Selectric is refreshed

Public methods

$('select').selectric('open');    // Open options
$('select').selectric('close');   // Close options
$('select').selectric('destroy'); // Destroy select and go back to normal
$('select').selectric('refresh'); // Reconstruct the plugin options box
$('select').selectric('init');    // Reinitialize the plugin

// Or...
var Selectric = $('select').data('selectric');

Selectric.open();    // Open options
Selectric.close();   // Close options
Selectric.destroy(); // Destroy select and go back to normal
Selectric.refresh(); // Reconstruct the plugin options box
Selectric.init();    // Reinitialize the plugin

Browser support

Basic demo

view more advanced demos and customization →

Project maintained by Leonardo Santos
GithubTwitterEmail

Hosted on GitHub Pages