JavaScript Picker

• 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>
  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