Selecto Dropdown: Select replacement with only pure Javascript

Description

This lightweight plugin replaces original html select tag with Selecto dropdown.

Features

* Replaces original html select tag with Selecto dropdown
* Supports images
* Supports multiple selectboxes
* No jQuery or other dependencies
* Easy to use
* Css is easy to customize
* Tested in IE9 and above, Firefox 3-4, recent WebKit browsers, and Opera

Demo

Link

Install

$3

``html
npm install westag-selecto
`

$3

`html
npm install westag-selecto
`

Usage

Install via npm(see above) or Download/clone the files

Link to JS file ex.:
`html

`

Link to css file ex.:
`html

`

Original dropdown you want to replace with Selecto's.
`html

Choose color
Purple
Blue
Yellow
Green


// support for images

Choose country
Australie
China
Austria
Japan
Germany

`

To initialize Selecto:
`html
// simple basic dropdown
var dropdown1 = new Selecto('#select');

// with custom width and height
var dropdown2 = new Selecto('#select', {
height: 50,
width: 30
});

// dropdown with images
var dropdown3 = new Selecto('.countries', {
width: 250,
height: '40',
renderFunction: myRender,
renderSelect: mySelect
});

// add images to items
function myRender(country) {
var template, cssClass;

cssClass = country.getAttribute('data-class');
template = cssClass ? '' + country.textContent : country.textContent;

return template;
}

// add selected item image to button
function mySelect(country) {
var template,
cssClass = country.getAttribute('data-class');

template = cssClass ? '' + country.textContent : country.textContent;

return template;
}
`

Methods

Method | Description
------ | -----------
.addValue() | change value
.getValue() | get the selected value

$3

`html
var dropdown = new Selecto('#select');

// set value
dropdown.addValue('blue');

// get the selected value
dropdown.getValue();
`

Events

Method | Description
------ | -----------
change | change value

$3

`html
var dropdown = new Selecto('#select',
{
onChange: changing
});

function changing(option) {
alert('testing');
}
``