JavaScript dropdown
Quick reference
Considering the example below:
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="dropdown"></div> <script> var dropdown = jSuites.dropdown(document.getElementById('dropdown'), { url: '/v4/large', autocomplete: true, multiple: true, width: '280px', }); </script> </html>
Methods
Method | Description |
---|---|
dropdown.open(); | Open the dropdown |
dropdown.close(boolean); | Close the dropdown @param int ignoreEvents - Do no execute onclose event |
dropdown.getText(); | Get the current label(s) from the selected option(s) in the dropdown |
dropdown.getValue(); | Get the current value(s) from the selected option(s) in the dropdown |
dropdown.setValue(string | array); | Set a new value(s) @param mixed newValue - A string value or an array with multiple values in case a multiple dropdown. |
dropdown.reset(); | Clear all selected options from the dropdown |
dropdown.add(); | Add a new element to the dropdown |
Events
Method | Description |
---|---|
onopen | Trigger a method when the dropdown is opened. (DOMElement element) => void |
onclose | Trigger a method when the dropdown is closed. (DOMElement element) => void |
onchange | Trigger a method when value is changed. (DOMElement element, Number index, String oldValue, String newValue, String oldLabel, String newLabel) => void |
onfocus | Trigger a method when the dropdown lost focus. (DOMElement element, Number value) => void |
onblur | Trigger a method when the dropdown lost focus. (DOMElement element, Number value) => void |
oninsert | Trigger a method when a new option is added to the dropdown. (DOMElement element, Object item, Object dataItem) => void |
Initialization options
Method | Description |
---|---|
data: mixed | Data to load into the dropdown |
src: string | Can be loaded from a external file |
multiple: boolean | Multiple options |
autocomplete: boolean | Allow autocomplete |
type: string | Render type: default | picker | searchbar |
width: number | Default width |
maxWidth: number | Max width for the dropdown |
value: string | Selected value |
placeholder: string | Placeholder instructions |
newOptions: boolean | Enable the add new option controls |