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/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/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>

JavaScript Dropdown - Full dropdown component with autocomplete and search