Documentation keyboard_arrow_right Picker

JavaScript Picker

The jSuites.picker is a responsive JavaScript plugin designed for easy option selection within web applications. Key features include its adaptability to different screen sizes, a user-friendly interface, customization capabilities, lightweight design for fast performance, and broad compatibility across browsers and devices.

Documentation

Methods

Method Description
getLabel(int); Return the option at the specified position
@param - element index
open(); Open the picker
close(); Closes the picker
getValue(); Returns the index corresponding to the current selected element
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

Examples

Load picker basic example

<html> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <div class='row'> <div class='column p10'> <div id='picker'></div> </div> </div> <script> jSuites.picker(document.getElementById('picker'), { data: ['Option1', 'Option2', 'Option3'], value: 3, }) </script> </html> 
import { Picker } from 'jsuites/react' import { useRef } from 'react' import 'jsuites/dist/jsuites.css' function App() { const picker = useRef(null); return ( <div className="App"> <Picker ref={picker} data={['Option1', 'Option2', 'Option3']} value={2} /> </div> ); } export default App; 
<template> <Picker ref="picker" :data="['Option1', 'Option2', 'Option3']" :value="2" /> </template> <script> import { Picker } from "jsuites/vue"; import 'jsuites/dist/jsuites.css' export default { name: 'App', components: { Picker }, }; </script>

Related Tools