```
### Step 2
Now get the `ul` DOM and run `dropselect`
```javascript
$(function() {
$('#dropselect-demo1').dropselect();
})
```
## API
### Options
Upon initilizing `dropselect`, you can pass these available options
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| multiselect | boolean | false | set to `true` if you want enable multi select menu. |
| clear | mixed | `{ show: true, label: 'Clear selected' }` | option to enable the clear item. Pass a boolean `true` for minimal use. |
| filter | mixed | `{ show: true, placeholder: 'Search', casesensitive: false, noresult: 'No results found' }` | option to enable the filter textbox. Pass a boolean `true` for minimal use |
| onclear | callback | | callback function when `clear` event was triggered |
| onselect | callback | | callback function when `select` event was triggered |
| onunselect | callback | | callback function when `unselect` event was triggered |
| ontoggle | callback | | callback function when `toggle` event was triggered |
| onchange | callback | | callback function when `change` event was triggered |
| icons | boolean | true | show check icons |
| width | mixed | 300 | dropselect width |
| items | mixed | "markup" | default items source. Get items from the `dropdown markup`, `array` or `function` |
### Events
| Event | Callback Params | Description |
| --- | --- | --- |
| ds.select | `object` item | triggered after you selected an item |
| ds.unselect | `object` item | triggered after you unselected an item |
| ds.clear | | triggered after you cleared selected items |
| ds.toggle | `object` item, `boolean` selected | triggered when item is toggled |
| ds.change | | triggered when item state was changed |
| ds.hidden | | triggered when dropdown is hidden - `hidden.bs.dropdown` |
### Properties
| Property | type | Description |
| --- | --- | --- |
| selectedItem | object | current selected item object |
| selectedItems | array | current selected items (array of pushed item for every selected items in `multiselect` mode) |
| selectedValue | string | current selected value |
| selectedValues | array | current selected values (array of pushed value for every selected value in `multiselect` mode) |
| items | array | list of items from your `markup` or `items` source |
### Methods
| Method | Params | Description |
| --- | --- | --- |
| toggle(index) | index - _zero based index of the item_ | toggles the selected state of an item |
| clear | | clear all selected items |
| select(index) | index - _zero based index of the item_ | manually selects an item given by an index number |
| unselect(index) | index - _zero based index of the item_ | manually unselects an item given by an index number |
| showLoading | | shows the loading indicator |
| hideLoading | | hides the loading indicator |
| hide | | completely hides the dropdown |
| item | index - _zero based index of an item_ | get the item `object` by index. Returns `{ item: ITEM_VALUE, text: ITEM_TEXT, icon: DEFAULT_ITEM_ICON, $element: LI_ELEMENT }` |
| destroy | | destroys the plugin |
#### Sample Call
```javascript
$(function() {
var mydropselect = $('#my-dropselect').dropselect({
filter: {
show: true,
placeholder: 'Search for an item'
},
multiselect: true
});
mydropselect.on('select', function(e, item) {
console.log(item);
console.log(e.selectedItem);
// use e.selectedItems to get an array of selected items (useful for multiselect)
});
$('#clear-button').on('click', function() {
mydropselect.dropselect('clear');
})
$('#toggle-item-3').on('click', function() {
mydropselect.dropselect('showLoading');
mydropselect.dropselect('toggle', 3);
})
})
```
## FAQ
1. What if I don't want to use this plugin as a select menu and just open the URL from an item?
_You can just specify the `href` attribute of an item with the URL and it will automatically open that url. `#` will specify that the item will act as a select menu item_
```html
```
2. How do I set the default selected item?
_You can add the `.dropselect-selected` class or the `data-selected` or the `selected` attribute on the dropdown markup e.g.:_
```html
```
3. How do I load data from external source (not from the dropdown markup)?
_You use the `items` options to specify the source of dropselect items. The option accepts `array` or `function`_
```javascript
$(function() {
$('#my-dropselect').dropselect({
// you can directly pass an array of items
// each item is an object (or string) containing:
// {
// text: 'display text',
// value: 'XX',
// a: '#' // an object containing the anchors attributes (href, class, etc.)
// selected: false // true or false
// }
//
// items: ['Item 1', 'Item 2', { value: '1', text: 'Item w/ Value 1' }, 'Item 4'],
// or you can pass a closure
items: function(e) {
// return an array
// return ['Item 1', 'Item 2', { value: '1', text: 'Item w/ Value 1' }, 'Item 4'];
// dealing with ajax
$.get('/my_url/get', {}, function(data) {
e.load(data.items);
});
// return false so dropselect will not auto load in dealing with ajax
return false;
},
// ...
});
})
```
4. How do I remove or destroy dropselect from the dropdown?
_You use the `destroy` mothod to remove any `data`, `event handlers` and `elements` attached related to the plugin_
```javascript
$(function() {
// destroy!
if (typeof $('#my-dropselect').data('dropselect') != 'undefined')
$('#my-dropselect').dropselect('destroy');
})
```
