A simple dropdown/selectbox
npm install dropdown-selectbox#### use
var Dropdown = require('dropdown-selectbox');
if not using browerify/webpack simply copy dropdown.js and dropdown.css.
See the examples in example folder.
#### create a dropdown
``javascript`
new Dropdown({
mainText: 'Select Item',
field: $('.mydropdown1'),
list: [
{name: 'Item1', id: 1},
{name: 'Item2', id: 2}
],
onSelect: function($item, $dropdown) {
var id = $item.data('id');
console.log(id, $dropdown);
}
});id are optional. If passed will be added as data-id to each list-item.
#### html generated
`html
Item1
Item1
Item2
`
#### Css
Copy the css from dropdown.css file .
##### Classes
- is-active - applied to dropdown, if dropdown is open.dropdown
- is-disabled - applied to , if the list provided is an empty array.dropdown__item
- item-selected - applied to , if item is selected.dropdown__item
- scrolled - applied to , if item s currently being navigated using keys.
#### load from a url
`javascript`
new Dropdown({
mainText: 'Select Item',
field: $('.mydropdown1'),
url: '/list',
parse: function(data) {
// use this function to specify data to be used
// good for updating main text with selected item
return {list: data.items, selected: data.items[0]};
},
onSelect: function($item, $dropdown) {
console.log($item, $dropdown);
}
});
#### Use it as SelectBox [Options]
- type : 'selectBox', it works as select box.Supports key navigation and search.
- scrollOn: 200, no of pixels to start scrolling for key down nav.
#### For custom selected and item html
selTpl: {tpl: ' selected item ', _class: 'name'},
itmTpl: {tpl: ' item ', _class: 'name'},
The selTpl will be inserted inside
The itmTpl will be inserted inside
#### Add items dynamically
`javascript
var dropdown = new Dropdown({
mainText: 'Select Item',
field: $('.mydropdown1')
});dropdown.addItems(
list: [
{name: 'Item1', id: 1},
{name: 'Item2': id: 2}
]
);
`#### Update selected item text
`javascript
dropdown.updateSelected({name: 'Item1', id: 1}, true);
`pass
true if the item is present in the list
$3
`javascript
dropdown.prependItems(
list[
{name: 'Item1', id: 1}
]
});
`
#### Add custom elements
dropdown.addCustom('
My datepicker');#### Options:
- noDataText: 'Not available', applies
is-disabled` class if list is empty.#### Api
- dropdown.open() -- opens the dropdown/selectBox
- dropdown.close() -- closes the dropdown/selectBox
- dropdown.closeAll() -- closes all the dropdowns/ selectBox
- dropdown.disabled() -- adds disabled class to the dropdowns
- dropdown.removeItems() -- emptys the list