JavaScript Picker

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="picker"></div>

<script type='text/loader'>
  var picker = jSuites.picker(document.getElementById('picker'), {
    data: [ 'Verdana', 'Arial', 'Courier New' ],
    value: 1,
    content: 'format_size',
  })
</script>
</html>

Methods

Method	Description
picker.getLabel(int);	Return the option at the specified position @param - element index
picker.open();	Open the picker
picker.close();	Closes the picker
picker.getValue();	Returns the index corresponding to the current selected element
picker.setValue(int);	Define the option at the specified position as the picker value

Events

The order of the onchange methods has changed from 4.2.0

Method	Description
onchange	When the value is changed `onchange(DOMElement element, Object instance, String value, String value, Number selectIndex) => void`
onclose	When the picker is closed `onclose(DOMElement element, Object instance) => void`
onopen	When the picker is open `onopen(DOMElement element, Object instance) => void`

Initialization options

Property	Description
data: string[]	The picker options.
value: int	The position of the initial picker option.
content: string	The html or material-design icon that should be in front of the picker.
width: number	The picker width.
render: function	How each option should be shown. `function(string option) => string`