<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Multi Select JS - Demos</title>
<!-- Include the Multi Select stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/multi-select-dropdown-js/MultiSelect.min.css">
<style>
* {
box-sizing: border-box;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
margin: 0;
padding: 20px;
background-color: #f3f4f7;
color: #212529;
}
.container {
display: flex;
flex-direction: column;
margin: 60px auto;
padding: 40px 50px 50px;
max-width: 600px;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
h1 {
margin: 0 0 5px;
font-size: 28px;
font-weight: 600;
color: #212529;
}
p.description {
color: #65727e;
margin-top: 0;
margin-bottom: 10px;
font-size: 15px;
line-height: 1.5;
}
label {
display: block;
margin: 20px 0 10px;
font-weight: 600;
color: #212529;
padding-bottom: 8px;
}
.hint {
display: block;
font-size: 13px;
color: #888;
margin-top: 5px;
margin-bottom: 5px;
font-weight: normal;
}
.btn {
display: inline-block;
margin-top: 30px;
padding: 14px 20px;
background: #40c979;
color: #fff;
font-weight: bold;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s;
width: 100%;
}
.btn:hover { background: #35b068; }
.btn-small {
width: auto;
margin-top: 10px;
font-size: 14px;
padding: 8px 15px;
background: #6c757d;
}
.btn-small:hover { background: #5a6268; }
</style>
</head>
<body>
<form class="container" onsubmit="event.preventDefault(); alert('Success! Form validation passed and data is ready to be submitted.');">
<h1>Multi Select JS</h1>
<p class="description">A lightweight, dependency-free, and highly customizable Vanilla JavaScript library. Check out the interactive demos below.</p>
<!-- DEMO 1: OptGroups -->
<label for="fruits">
1. Standard & OptGroups
<span class="hint">Parses standard HTML <code><optgroup></code> tags. Click a group header to toggle the entire sublist.</span>
</label>
<select id="fruits" name="fruits[]" data-placeholder="Select fruits" multiple data-multi-select>
<optgroup label="Berries">
<option value="Blackberry">Blackberry</option>
<option value="Blueberry">Blueberry</option>
<option value="Raspberry">Raspberry</option>
<option value="Strawberry">Strawberry</option>
</optgroup>
<optgroup label="Citrus">
<option value="Orange">Orange</option>
<option value="Grapefruit">Grapefruit</option>
<option value="Lemon">Lemon</option>
</optgroup>
<optgroup label="Other">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Mango">Mango</option>
<option value="Watermelon">Watermelon</option>
</optgroup>
</select>
<!-- DEMO 2: Validation & Limits -->
<label for="cars">
2. Limits & Form Validation
<span class="hint">Try to submit the form without selecting a car. Uses <code>required</code>, <code>data-max="3"</code>, and hides the "Select All" button.</span>
</label>
<select id="cars" name="cars[]" data-placeholder="Select up to 3 cars (Required)" required data-max="3" data-select-all="false" multiple data-multi-select>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Toyota">Toyota</option>
</select>
<!-- DEMO 3: Dark Mode -->
<label for="darkmode">
3. Dark Mode Theme
<span class="hint">Easily toggle themes using <code>data-theme="dark"</code> (Accepts: auto, light, dark).</span>
</label>
<select id="darkmode" name="darkmode[]" data-placeholder="Dark mode active..." data-theme="dark" multiple data-multi-select>
<option value="1">Dark Option 1</option>
<option value="2">Dark Option 2</option>
<option value="3">Dark Option 3</option>
</select>
<!-- DEMO 4: Advanced JS Init -->
<label for="dynamic">
4. Advanced JS Initialization
<span class="hint">Initialized entirely via JavaScript. Showcases HTML tag injection, custom callbacks, and auto-close on selection.</span>
</label>
<select id="dynamic" name="dynamic[]" multiple></select>
<!-- DEMO 5: Async Fetch -->
<label for="async">
5. Async Data Fetching
<span class="hint">Natively fetch JSON arrays from remote endpoints.</span>
</label>
<select id="async" name="async[]" multiple></select>
<button id="fetch-btn" type="button" class="btn btn-small">Fetch Remote Data</button>
<!-- Submit Button for Testing Form Validation -->
<button type="submit" class="btn">Test Form Submission</button>
</form>
<!-- Include the Multi Select JS class -->
<script src="https://cdn.jsdelivr.net/npm/multi-select-dropdown-js/MultiSelect.min.js"></script>
<!-- Initialize Custom JS Demos -->
<script>
// ==========================================
// DEMO 4: Advanced JS Configuration
// ==========================================
const dynamicSelect = new MultiSelect('#dynamic', {
placeholder: 'Select an option',
search: true,
selectAll: false,
listAll: false, // Will show "X selected" instead of rendering tags
closeListOnItemSelect: true, // Auto-closes dropdown on click
data:[
{ value: 'opt1', text: 'Standard Option' },
{ value: 'opt2', html: '<span style="color: #e44e4e; font-weight: bold;">Option 2 with Custom HTML!</span>' },
{ value: 'opt3', text: 'Pre-Selected Option', selected: true },
{ value: 'opt4', text: 'Option 4' },
{ value: 'opt5', text: 'Option 5' }
],
onChange: function(value, text, element) {
console.log('Change Event:', value, text);
},
onSelect: function(value, text, element) {
console.log('Selected Event:', value);
},
onUnselect: function(value, text, element) {
console.log('Unselected Event:', value);
}
});
// ==========================================
// DEMO 5: Async Fetch Data API
// ==========================================
const asyncSelect = new MultiSelect('#async', {
placeholder: 'Click fetch button to load...',
search: true,
selectAll: true
});
document.getElementById('fetch-btn').addEventListener('click', async (e) => {
const btn = e.target;
btn.textContent = "Loading...";
btn.disabled = true;
// Mock an API Response to keep the demo self-contained
const mockApiData = JSON.stringify([
{ value: 'remote_1', text: 'Cloud User 1', group: 'Fetched Data' },
{ value: 'remote_2', text: 'Cloud User 2', group: 'Fetched Data' },
{ value: 'remote_3', text: 'Cloud User 3', group: 'Fetched Data' },
{ value: 'remote_4', text: 'Cloud User 4', group: 'Fetched Data' }
]);
// Create a blob URL to simulate fetching from a real remote domain
const blob = new Blob([mockApiData], { type: 'application/json' });
const mockApiUrl = URL.createObjectURL(blob);
// Trigger the native fetch function inside your library
await asyncSelect.fetch(mockApiUrl);
btn.textContent = "Data Loaded Successfully!";
btn.style.backgroundColor = "#40c979";
btn.style.color = "#fff";
});
</script>
</body>
</html>
Back to Snippets
Multi Select Dropdown JS
Customizable Multi Select Dropdown built with HTML and JS, featuring search, select-all, and dynamic options without dependencies.
2,170