JavaScript Dropdown

The jSuites offer a lightweight JavaScript Dropdown plugin with a complete suite of customizable options that suits multiple application needs. The new version brings native autocomplete, multi-select capabilities, and adaptive rendering and other features such as:

Great performance;
Create dropdowns from a local array of data;
Load data from a remote data source;
Autocomplete with local or remote search;
Lazy loading support;
Multi-select dropdown options;
Responsive dropdown rendering;
Visual enhancements with images and icons;
Organized dropdowns with item grouping;

This page documents the jSuites Dropdown, a lightweight vanilla JavaScript dropdown plugin.

Best for:

Simple dropdown needs without framework overhead
Projects requiring no build tools
Lightweight implementations
Jspreadsheet CE projects

For modern applications requiring enhanced performance and framework integration, LemonadeJS Dropdown offers:

Better Performance: Smart DOM management for 100K+ items
Framework Support: Vue, React, Angular integration
Enhanced Accessibility: Improved ARIA and keyboard navigation
Active Development: Modern high-performance replacement

Explore LemonadeJS Dropdown →

Jspreadsheet Pro - Advanced Spreadsheet Dropdowns

For professional spreadsheet applications with advanced dropdown features, Jspreadsheet Pro provides:

Conditional Dropdowns: Change options based on other cell values
Dynamic Ranges: Link to cell ranges (e.g., Sheet1!A1:A4)
Remote Search: Autocomplete from backend APIs with JWT support
Professional Features: Enhanced dropdown editors for data grids
Uses LemonadeJS Dropdown: Modern high-performance component

Explore Jspreadsheet Pro Dropdown Editor →

Jspreadsheet CE - Open Source Spreadsheets

For open-source spreadsheet projects, Jspreadsheet CE uses jSuites Dropdown:

Community edition spreadsheet
Basic dropdown column type
Uses this component (jSuites Dropdown)
MIT license

Explore Jspreadsheet CE →

Comparison

Feature	jSuites	LemonadeJS	Jspreadsheet Pro	Jspreadsheet CE
Framework	Vanilla JS	Vue/React/Angular	Any	Any
Performance	Good	✓✓ Excellent	✓✓ Excellent	Good
Conditional Dropdowns	-	-	✓	-
Dynamic Ranges	-	-	✓	-
License	MIT	MIT	Commercial	MIT
Best For	Simple forms	Modern apps	Professional spreadsheets	Open source

Documentation

Methods

The JavaScript dropdown instance provides the following methods for programmatic interaction:

Method	Description
`open();`	Opens the dropdown.
`close(boolean);`	Closes the dropdown. `@param boolean ignoreEvents` - If true, does not trigger the `onClose` event.
`getText();`	Retrieves the label(s) from the selected option(s) in the dropdown.
`getValue();`	Retrieves the value(s) from the selected option(s) in the dropdown.
`setValue(string\|array);`	Sets new value(s). `@param mixed newValue` - A single value as a string or multiple values as an array for multi-select dropdowns.
`reset();`	Clears all selected options in the dropdown.
`add();`	Adds a new option to the dropdown.
`setData(mixed);`	Loads new data into the dropdown. `@param mixed data` - The data to load.
`getData();`	Retrieves the data currently loaded in the dropdown.
`setUrl(string, function);`	Updates the URL from which the dropdown fetches data. `@param string url` `@param function callback` - The callback function to execute after setting the URL.
`getPosition(string);`	Retrieves the position of the option associated with the given value. `@param string value` - The value of the option.
`selectIndex(int);`	Selects an option based on its index. `@param int index` - The index of the option to select.

Events

The following events can be use to integrate the dropdown with your application for enhanced interactivity:

Event	Description
`onopen`	Triggered when the dropdown opens. `(DOMElement element) => void`
`onclose`	Triggered when the dropdown closes. `(DOMElement element) => void`
`onchange`	Triggered when the selected value changes. `(DOMElement element, Number index, String oldValue, String newValue, String oldLabel, String newLabel) => void`
`onfocus`	Triggered when the dropdown receives focus. `(DOMElement element) => void`
`onblur`	Triggered when the dropdown loses focus. `(DOMElement element) => void`
`onbeforeinput`	Triggered before the item addition prompt is opened, allowing a customized input to be used. The return of this function is the title of the new item. `(Object instance) => void`
`onbeforeinsert`	Triggered before a new item is added to the dropdown. `(Object instance, Object item) => void`
`oninsert`	Triggered when a new option is added to the dropdown. `(Object instance, Object item, Object dataItem) => void`
`onload`	Triggered when the dropdown is fully loaded with data. `(DOMElement element, Object instance, Array data, String currentValue) => void`

Initialization Options

Customize your dropdown's behavior with the following initial settings:

Property	Description
`data: Array`	An array of items to load into the dropdown.
`url: string`	The URL of an external file to load dropdown data from.
`multiple: boolean`	Set to `true` to allow multiple selections.
`autocomplete: boolean`	Enables the autocomplete feature.
`type: string`	Sets the render type. Options: `default`, `picker`, or `searchbar`.
`width: string`	Specifies the dropdown's default width.
`value: string`	Sets the initially selected value.
`placeholder: string`	Displays placeholder text when no selection is made.
`newOptions: boolean`	Enables controls for adding new options.
`lazyLoading: boolean`	Enables lazy loading for improved performance with large datasets.
`allowEmpty: boolean`	Allow toggle the selected item on single dropdowns. Default: true
`format: 0\|1`	Determines the data format. `0` for `{ text, value }`, `1` for `{ id, name }`. Default is `0`.

Each option in the dropdown is defined by one object and the possible attributes are the following:

Property	Description
`value: mixed`	The item's value. Default format.
`text: string`	The item's display label. Default format.
`id: mixed`	The item's identifier, used when `format` property is set to `1`.
`name: string`	The item's name, used as a label when `format` property is set to `1`.
`title: string`	A brief description of the item.
`tooltip: string`	Text displayed on mouseover.
`image: string`	URL or path to the item's icon image.
`group: string`	The name of the group this item belongs to.
`synonym: array`	Keywords associated with the item to aid in search.
`disabled: boolean`	If `true`, the item is not selectable.
`color: number`	A numerical value representing the item's color.
`icon: string`	A keyword for a Material Design icon associated with the item.

Examples

Create a simple dropdown with local data:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<div id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        { value: '1', text: 'Apple' },
        { value: '2', text: 'Banana' },
        { value: '3', text: 'Orange' },
        { value: '4', text: 'Grape' },
    ],
    width: '280px',
    value: '2'
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const data = [
        { value: '1', text: 'Apple' },
        { value: '2', text: 'Banana' },
        { value: '3', text: 'Orange' },
        { value: '4', text: 'Grape' },
    ];

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                width={'280px'}
                value={'2'}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" width="280px" value="2" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { value: '1', text: 'Apple' },
                { value: '2', text: 'Banana' },
                { value: '3', text: 'Orange' },
                { value: '4', text: 'Grape' },
            ]
        }
    }
};
</script>

Create an autocomplete dropdown capable of handling a vast dataset using this 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 id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    url: '/docs/large',
    autocomplete: true,
    lazyLoading: true,
    multiple: true,
    width: '280px',
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                url={'/docs/large'}
                multiple={true}
                lazyLoading={true}
                width={'280px'}
                autocomplete={true}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" url="/docs/large" width="280px"
        :multiple="true" :lazyLoading="true" :autocomplete="true" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
};
</script>

Grouping Items

Organize your dropdown menu with categorized item groups using this 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 id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data:[
        { group:'Breads', value:'1', text:'Wholemeal' },
        { group:'Breads', value:'2', text:'Wholegrain' },
        { group:'Breakfast Cereals', value:'4', text:'High fibre (wholegrain) oats' },
        { group:'Breakfast Cereals', value:'5', text:'Porridge' },
        { group:'Grains', value:'7', text:'Rice' },
        { group:'Grains', value:'8', text:'Barley' },
        { group:'Other products', value:'10', text:'Pasta' },
        { group:'Other products', value:'11', text:'Noodles' }
        ],
    width:'280px',
    autocomplete: true,
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const data = [
        { group: 'Breads', value: '1', text: 'Wholemeal' },
        { group: 'Breads', value: '2', text: 'Wholegrain' },
        { group: 'Breakfast Cereals', value: '4', text: 'High fibre (wholegrain) oats' },
        { group: 'Breakfast Cereals', value: '5', text: 'Porridge' },
        { group: 'Grains', value: '7', text: 'Rice' },
        { group: 'Grains', value: '8', text: 'Barley' },
        { group: 'Other products', value: '10', text: 'Pasta' },
        { group: 'Other products', value: '11', text: 'Noodles' }
    ];

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                width={'280px'}
                autocomplete={true}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" width="280px" :autocomplete="true" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { group: 'Breads', value: '1', text: 'Wholemeal' },
                { group: 'Breads', value: '2', text: 'Wholegrain' },
                { group: 'Breakfast Cereals', value: '4', text: 'High fibre (wholegrain) oats' },
                { group: 'Breakfast Cereals', value: '5', text: 'Porridge' },
                { group: 'Grains', value: '7', text: 'Rice' },
                { group: 'Grains', value: '8', text: 'Barley' },
                { group: 'Other products', value: '10', text: 'Pasta' },
                { group: 'Other products', value: '11', text: 'Noodles' }
            ]
        }
    }
};
</script>

Create a dropdown that allows multiple selections:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<div id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        { value: '1', text: 'JavaScript' },
        { value: '2', text: 'Python' },
        { value: '3', text: 'Java' },
        { value: '4', text: 'C++' },
        { value: '5', text: 'Ruby' },
        { value: '6', text: 'Go' },
    ],
    multiple: true,
    width: '280px',
    placeholder: 'Select programming languages'
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const data = [
        { value: '1', text: 'JavaScript' },
        { value: '2', text: 'Python' },
        { value: '3', text: 'Java' },
        { value: '4', text: 'C++' },
        { value: '5', text: 'Ruby' },
        { value: '6', text: 'Go' },
    ];

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                multiple={true}
                width={'280px'}
                placeholder={'Select programming languages'}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" :multiple="true" width="280px" placeholder="Select programming languages" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { value: '1', text: 'JavaScript' },
                { value: '2', text: 'Python' },
                { value: '3', text: 'Java' },
                { value: '4', text: 'C++' },
                { value: '5', text: 'Ruby' },
                { value: '6', text: 'Go' },
            ]
        }
    }
};
</script>

Create a dropdown with Material Design icons for a more visual experience:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        { value: '1', text: 'Home', icon: 'home' },
        { value: '2', text: 'Search', icon: 'search' },
        { value: '3', text: 'Settings', icon: 'settings' },
        { value: '4', text: 'Favorite', icon: 'favorite' },
        { value: '5', text: 'Delete', icon: 'delete' },
    ],
    width: '280px',
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const data = [
        { value: '1', text: 'Home', icon: 'home' },
        { value: '2', text: 'Search', icon: 'search' },
        { value: '3', text: 'Settings', icon: 'settings' },
        { value: '4', text: 'Favorite', icon: 'favorite' },
        { value: '5', text: 'Delete', icon: 'delete' },
    ];

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                width={'280px'}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" width="280px" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { value: '1', text: 'Home', icon: 'home' },
                { value: '2', text: 'Search', icon: 'search' },
                { value: '3', text: 'Settings', icon: 'settings' },
                { value: '4', text: 'Favorite', icon: 'favorite' },
                { value: '5', text: 'Delete', icon: 'delete' },
            ]
        }
    }
};
</script>

Enable the New Option button, allowing users to dynamically add entries to the dropdown. The example below includes an event handler to manage actions when a user adds a new option.

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<div id="dropdown"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data:[
        { value:'1', text: 'Tomatoes' },
        { value:'2', text: 'Carrots' },
        { value:'3', text: 'Onions' },
        { value:'4', text: 'Garlic' },
    ],
    newOptions: true,
    oninsert: function(instance, item) {
        jSuites.ajax({
            url: '/v5/getId',
            type: 'POST',
            dataType: 'json',
            data: { data: item },
            success: function(idFromTheServer) {
                // Set the item id from the number sent by the remote server
                instance.setId(item, idFromTheServer);
            }
        });
    },
    width:'280px',
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import jSuites from 'jsuites'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);

    const onInsert = function (instance, item) {
        jSuites.ajax({
            url: '/v5/getId',
            type: 'POST',
            dataType: 'json',
            data: { data: item },
            success: function (idFromTheServer) {
                // Set the item id from the number sent by the remote server
                instance.setId(item, idFromTheServer);
            }
        });
    };

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={[
                    { value: '1', text: 'Tomatoes' },
                    { value: '2', text: 'Carrots' },
                    { value: '3', text: 'Onions' },
                    { value: '4', text: 'Garlic' },
                ]}
                width={'280px'}
                newOptions={true}
                oninsert={onInsert}
            />
        </div>
    );
}

export default App;

<template>
    <Dropdown ref="dropdown" :data="data" :oninsert="onInsert" width="280px" :newOptions="true" />
</template>

<script>
import { Dropdown } from "jsuites/vue";
import jSuites from 'jsuites';
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { value: '1', text: 'Tomatoes' },
                { value: '2', text: 'Carrots' },
                { value: '3', text: 'Onions' },
                { value: '4', text: 'Garlic' },
            ]
        }
    },
    methods: {
        onInsert: function (instance, item) {
            jSuites.ajax({
                url: '/v5/getId',
                type: 'POST',
                dataType: 'json',
                data: { data: item },
                success: function (idFromTheServer) {
                    // Set the item id from the number sent by the remote server
                    instance.setId(item, idFromTheServer);
                }
            });
        }
    }
};
</script>

Implement event handlers to respond to dropdown changes:

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<div id="dropdown"></div>
<div id="console" style="margin-top: 20px; padding: 10px; background: #f5f5f5;"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown'), {
    data: [
        { value: 'small', text: 'Small' },
        { value: 'medium', text: 'Medium' },
        { value: 'large', text: 'Large' },
        { value: 'xlarge', text: 'Extra Large' },
    ],
    width: '280px',
    value: 'medium',
    onchange: function(el, index, oldValue, newValue, oldLabel, newLabel) {
        document.getElementById('console').innerHTML =
            'Selected: ' + newLabel + ' (value: ' + newValue + ')';
    },
    onopen: function(el) {
        console.log('Dropdown opened');
    },
    onclose: function(el) {
        console.log('Dropdown closed');
    }
});
</script>
</html>

import { Dropdown } from 'jsuites/react'
import { useRef, useState } from 'react'
import 'jsuites/dist/jsuites.css'

function App() {
    const dropdown = useRef(null);
    const [message, setMessage] = useState('');

    const data = [
        { value: 'small', text: 'Small' },
        { value: 'medium', text: 'Medium' },
        { value: 'large', text: 'Large' },
        { value: 'xlarge', text: 'Extra Large' },
    ];

    const handleChange = (el, index, oldValue, newValue, oldLabel, newLabel) => {
        setMessage(`Selected: ${newLabel} (value: ${newValue})`);
    };

    const handleOpen = (el) => {
        console.log('Dropdown opened');
    };

    const handleClose = (el) => {
        console.log('Dropdown closed');
    };

    return (
        <div className="App">
            <Dropdown
                ref={dropdown}
                data={data}
                width={'280px'}
                value={'medium'}
                onchange={handleChange}
                onopen={handleOpen}
                onclose={handleClose}
            />
            {message && (
                <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
                    {message}
                </div>
            )}
        </div>
    );
}

export default App;

<template>
    <div>
        <Dropdown
            ref="dropdown"
            :data="data"
            width="280px"
            value="medium"
            :onchange="handleChange"
            :onopen="handleOpen"
            :onclose="handleClose"
        />
        <div v-if="message" style="margin-top: 20px; padding: 10px; background: #f5f5f5;">
            {{ message }}
        </div>
    </div>
</template>

<script>
import { Dropdown } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            message: '',
            data: [
                { value: 'small', text: 'Small' },
                { value: 'medium', text: 'Medium' },
                { value: 'large', text: 'Large' },
                { value: 'xlarge', text: 'Extra Large' },
            ]
        }
    },
    methods: {
        handleChange(el, index, oldValue, newValue, oldLabel, newLabel) {
            this.message = `Selected: ${newLabel} (value: ${newValue})`;
        },
        handleOpen(el) {
            console.log('Dropdown opened');
        },
        handleClose(el) {
            console.log('Dropdown closed');
        }
    }
};
</script>

JavaScript Dropdown