09:41 7/6/26 JavaScript Dropdown
menu
Documentation keyboard_arrow_right Dropdown
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;
JavaScript Dropdown Implementations
jSuites Dropdown - Lightweight & Simple
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
Related Dropdown Solutions
[Link] 1/27
09:41 7/6/26 JavaScript Dropdown
LemonadeJS Dropdown - High Performance
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
[Link] 2/27
09:41 7/6/26 JavaScript Dropdown
Jspreadsheet
Feature jSuites LemonadeJS Jspreadsheet Pro
CE
Framework Vanilla JS Vue/React/Angular Any Any
Performance Good ✓✓ Excellent ✓✓ Excellent Good
Conditional
- - ✓ -
Dropdowns
Dynamic Ranges - - ✓ -
License MIT MIT Commercial MIT
Simple Professional
Best For Modern apps Open source
forms spreadsheets
Documentation
Methods
The JavaScript dropdown instance provides the following methods for programmatic
interaction:
Method Description
open(); Opens the dropdown.
Closes the dropdown.
close(boolean); @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.
Sets new value(s).
setValue(string|array); @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.
[Link] 3/27
09:41 7/6/26 JavaScript Dropdown
Method Description
add(); Adds a new option to the dropdown.
Loads new data into the dropdown.
setData(mixed);
@param mixed data - The data to load.
getData(); Retrieves the data currently loaded in the dropdown.
Updates the URL from which the dropdown fetches data.
setUrl(string, @param string url
function); @param function callback - The callback function to execute after
setting the URL.
Retrieves the position of the option associated with the given value.
getPosition(string);
@param string value - The value of the option.
Selects an option based on its index.
selectIndex(int);
@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
Triggered when the dropdown opens.
onopen
(DOMElement element) => void
Triggered when the dropdown closes.
onclose
(DOMElement element) => void
Triggered when the selected value changes.
onchange (DOMElement element, Number index, String oldValue, String newValue,
String oldLabel, String newLabel) => void
Triggered when the dropdown receives focus.
onfocus
(DOMElement element) => void
Triggered when the dropdown loses focus.
onblur
(DOMElement element) => void
[Link] 4/27
09:41 7/6/26 JavaScript Dropdown
Event Description
Triggered before the item addition prompt is opened, allowing a customized input to
onbeforeinput be used. The return of this function is the title of the new item.
(Object instance) => void
Triggered before a new item is added to the dropdown.
onbeforeinsert
(Object instance, Object item) => void
Triggered when a new option is added to the dropdown.
oninsert
(Object instance, Object item, Object dataItem) => void
Triggered when the dropdown is fully loaded with data.
onload (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:
Enables the autocomplete feature.
boolean
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
[Link] 5/27
09:41 7/6/26 JavaScript Dropdown
Property Description
Determines the data format. 0 for { text, value }, 1 for { id, name }.
format: 0|1
Default is 0.
Dropdown Items
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
Basic Dropdown
Create a simple dropdown with local data:
[Link] 6/27
09:41 7/6/26 JavaScript Dropdown
Banana
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<script>
[Link]([Link]('dropdown'), {
data: [
{ value: '1', text: 'Apple' },
{ value: '2', text: 'Banana' },
{ value: '3', text: 'Orange' },
{ value: '4', text: 'Grape' },
],
width: '280px',
value: '2'
});
</script>
</html>
JavaScript Autocomplete Dropdown
[Link] 7/27
09:41 7/6/26 JavaScript Dropdown
Create an autocomplete dropdown capable of handling a vast dataset using this example:
[Link] 8/27
09:41 7/6/26 JavaScript Dropdown
[Link] 9/27
09:41 7/6/26 JavaScript Dropdown
[Link] 10/27
09:41 7/6/26 JavaScript Dropdown
[Link] 11/27
09:41 7/6/26 JavaScript Dropdown
[Link] 12/27
09:41 7/6/26 JavaScript Dropdown
[Link] 13/27
09:41 7/6/26 JavaScript Dropdown
[Link] 14/27
09:41 7/6/26 JavaScript Dropdown
[Link] 15/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<script>
[Link]([Link]('dropdown'), {
url: '/docs/large',
autocomplete: true,
lazyLoading: true,
multiple: true,
width: '280px',
});
</script>
</html>
Grouping Items
Organize your dropdown menu with categorized item groups using this example:
[Link] 16/27
09:41 7/6/26 JavaScript Dropdown
[Link] 17/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<script>
[Link]([Link]('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>
Multi-Select Dropdown
Create a dropdown that allows multiple selections:
[Link] 18/27
09:41 7/6/26 JavaScript Dropdown
Select programming languages
[Link] 19/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<script>
[Link]([Link]('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>
Dropdown with Icons
Create a dropdown with Material Design icons for a more visual experience:
[Link] 20/27
09:41 7/6/26 JavaScript Dropdown
[Link] 21/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<link rel="stylesheet" href="[Link]
family=Material+Icons" />
<div id="dropdown"></div>
<script>
[Link]([Link]('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>
Dropdown New Option
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.
[Link] 22/27
09:41 7/6/26 JavaScript Dropdown
[Link] 23/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<script>
[Link]([Link]('dropdown'), {
data:[
{ value:'1', text: 'Tomatoes' },
{ value:'2', text: 'Carrots' },
{ value:'3', text: 'Onions' },
{ value:'4', text: 'Garlic' },
],
newOptions: true,
oninsert: function(instance, item) {
[Link]({
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
[Link](item, idFromTheServer);
}
});
},
width:'280px',
});
</script>
</html>
[Link] 24/27
09:41 7/6/26 JavaScript Dropdown
Dropdown with Event Handling
Implement event handlers to respond to dropdown changes:
Medium
[Link] 25/27
09:41 7/6/26 JavaScript Dropdown
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id="dropdown"></div>
<div id="console" style="margin-top: 20px; padding: 10px; background:
#f5f5f5;"></div>
<script>
[Link]([Link]('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) {
[Link]('console').innerHTML =
'Selected: ' + newLabel + ' (value: ' + newValue + ')';
},
onopen: function(el) {
[Link]('Dropdown opened');
},
onclose: function(el) {
[Link]('Dropdown closed');
}
});
</script>
</html>
[Link] 26/27
09:41 7/6/26 JavaScript Dropdown
More Dropdown Examples
JavaScript Countries Dropdown
Dropdown Events
Responsive JavaScript Dropdown
[Link] 27/27