custom-select-light

A lightweight jQuery plugin for custom select creation.

No more supported

This plugin was totally rewritten and finally custom-select has born!
View on github - View on npmjs.

custom-select-light is no more supported.

How it works

Start with a simple select:
``html

Select...
Foo
Buzz

`
Important: Don't nest the select inside a label, use instead the for attribute in the label

With jQuery simply apply the plugin to your select:
`javascript
$('#mySelect').customSelectLight();
`

Here's the HTML result:
`html



`
The 'll be wrapped in a div .cstSelContainer, an opener .cstSelOpener and a panel .cstSelPanel, will'be created, with the cloned options from the original .

That's all! Show, hide and styles will'be managed via css.

And now have fun.

Options

$3

Type: string

Default: custom-select-panel

$3


Type: string

Default: custom-select-option

$3


Type: string

Default: custom-select-opener

$3


Type: string

Default: custom-select-container

$3


Type: boolean

Default: true

Sometimes it is useful to skip the scroll to setted element function, to avoid some unwanted css animations behaviours, especially when the panel has an absolute position.

Methods


To use the plugin public methods:
$(selector).customSelectLight( methodName [, ...arguments])

$3

Argument: Array

Usage: $('#mySelect').customSelectLight('remove', ['foo', 'bazz']);

Removes the select's options that have the value provided.
If no argument is given triggers the 'empty' method.

$3

Argument: none

Usage: $('#mySelect').customSelectLight('empty')

Removes all the select's options.

$3


Argument: 2D Array

Usage: $('#mySelect').customSelectLight('add', [['liz','Liz'],['nut','Nut']])`

Adds new options to the select.
The first element of the argument's array is the value, the second is the label