https://github.com/wesx8/selecto
html select replacement written in vanillaJS
https://github.com/wesx8/selecto
dropdown dropdown-menus easy-to-use javascript js lightweight select-image selecto swift vanilla-javascript vanilla-js
Last synced: 3 months ago
JSON representation
html select replacement written in vanillaJS
- Host: GitHub
- URL: https://github.com/wesx8/selecto
- Owner: wesx8
- License: mit
- Created: 2018-05-17T14:34:14.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-18T16:03:37.000Z (about 8 years ago)
- Last Synced: 2025-10-22T13:44:18.570Z (7 months ago)
- Topics: dropdown, dropdown-menus, easy-to-use, javascript, js, lightweight, select-image, selecto, swift, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://westag.github.io/selecto/
- Size: 27.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://westag.github.io/selecto/)
## Install
### Bower
```html
npm install westag-selecto
```
### npm
```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
### Usage
```html
var dropdown = new Selecto('#select');
// set value
dropdown.addValue('blue');
// get the selected value
dropdown.getValue();
```
## Events
Method | Description
------ | -----------
change | change value
### Usage
```html
var dropdown = new Selecto('#select',
{
onChange: changing
});
function changing(option) {
alert('testing');
}
```