Selectik

Designed & built by Ivan Kubrakov.

Selectik is jQuery plugin, easy use, cross-browser alternative to the standard select form element which can be customised with CSS.

Features:

Support browsers: IE9+, Chrome, Safari, Firefox.

All functionality you can test below in sandbox. Also you can test a speed generation of custom selects.

Latest code and issue tracker placed on https://github.com/Brankub/selectik. If you will find problems in usage, please put an issue in GitHub

Updates:

Added additional parameter 'minScrollHeight' for scroll:

...
$('select').selectik({
minScrollHeight: 20
});
...

Added HTML support in custom list item. Just add attribute to options (data-selectik) with HTML version:

...
<option value="[some value]" data-selectik="Spider <i>man</i>">Spider man<option>
...

Change/add methods

Now you can change/add methods for custom select. For example you need to change method of generation html for the list:

$('select').selectik({maxItems: 8},
{
_generateHtml: function(){
this.$collection = this.$cselect.children();
var html = '';
for (var i = 0; i < this.$collection.length; i++){
var $this = $(this.$collection[i]);
var textOption = $this[0].text;
var valueOption = $this[0].value;
html += '<li class="'+ ($this.attr('disabled') === 'disabled' ? 'disabled' : '') +' new" data-value="'+valueOption+'">'+textOption+'</li>';
};
return html;
}
}
);

Examples of custom selects


Test dynamical insert select

Quantity of options
Width of select
If 0 - width of bigger option
Max items
Minimal height of scroll
Type of scroll
Speed of fade animation

Show original selects



Info about time operation:

Examples of API

Insert 'new option' in first select and 'reload'


Show/hide second list

Set new 'selected' (active) option for first select

Index number option

Value options

Set new 'width' (active) option for third select

'Enable'/'Disable' first select

Usage

First include in html head tag stylesheet for custom selects (you can customize demo CSS file), jQuery, jQuery mousewheel plugin (included in project), and Selectik .js file:

<head>
...
<link rel="stylesheet" type="text/css" href="css/selectik.css" /> // CSS for Selectik
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> // jQuery library
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> // mousewhell plugin
<script type="text/javascript" src="js/jquery.selectik.js"></script> // Selectik plugin
...
</head>

You can choose what select should be custom by class, id or use for all selects on page by tag:

For all selects on page:

$(document).ready(function(){
$('select').selectik();
});

Only with some class/id:

$(document).ready(function(){
$('.someclass').selectik();
});

Plugin parametrs

Container class (containerClass) - for customizing class of main div around custom and original select. Default value - 'custom-select'.

Width of custom select (width) - if you willn't use this parametr custom select will be with width of bigger option. Default value - '0'.

Maximum items (maxItems) - you can put max quantity of options that should be visible. If quantity of options will be bigger plugin will put scroll. If value of this paramentr will be '0', all options will be visible. Default value - '0'.

Type of scroll (customScroll) - choose type of scroll (custom or original). 1 - custom, 0 - original. Default value - '1'.

Speed of animation (speedAnimation) - speed of show/hide animation in milliseconds. Default value - '200'.

Smart positioning. Default value - 'true'.

Minimal height of scroll. Default value - '10'.

Example of using parametrs:

$('select').selectik({
width: 300,
maxItems: 5,
customScroll: 0,
speedAnimation: 100
smartPosition: false
minScrollHeight: 20
});

Plugin API

API of plugin are utils which used when necessary to reload, show/hide, enable/disable, change selected option or set dynamicly width of select.

In Selectik jQuery store a reference to the plugin of object by 'data'. In this case you should use 'data' and know what select to control.

Reload custom select when original was changed:

$('.first select').data('selectik').refreshCS();

Show/hide list:

$('.second select').data('selectik').showCS(); // show list
$('.second select').data('selectik').hideCS(); // hide list

Change selected option:

$('.first select').data('selectik').changeCS({index: 1}); // set first option 'selected'
$('.first select').data('selectik').changeCS({value: 'New'}); // set selected options with value 'New'

Set width:

$('.third select').data('selectik').setWidthCS(200); // set width 200px

Enable/disable select:

$('.first select').data('selectik').disableCS(); // disable select
$('.first select').data('selectik').enableCS(); // enable select

Designed & built by Ivan Kubrakov. Thanks for the patience to Victor Slivinskiy.