A lightweight select box replacement written in pure javascript.
npm install westag-selectoThis lightweight plugin replaces original html select tag with Selecto dropdown.
* 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
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
// support for images
`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');
}
``