Create powerful user interfaces with our Multi Select Dropdown! This tool enhances native select elements, allowing for multiple selections, dynamic content generation, integrated search functionality, and customizable UI without any dependencies. No jQuery or other library is required!
The complete guide and reference is available here: https://codeshack.io/multi-select-dropdown-html-javascript/
Clone the repository and include the CSS and JavaScript files in your project.
Add the following to the head tag:
<link rel="stylesheet" href="https://github.com/codeshackio/multi-select-dropdown-js/blob/main/path/to/multi-select-dropdown.css">
Append the following to the body tag:
<script src="https://github.com/codeshackio/multi-select-dropdown-js/raw/main/path/to/multi-select-dropdown.js"></script>
Here's a simple example to add the multi-select dropdown to your project:
<select id="example-multi-select" data-placeholder="Select options" multiple="multiple" data-multi-select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<!-- more options -->
</select>
Or:
<select id="example-multi-select" data-placeholder="Select options" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<!-- more options -->
</select>
<script src="https://github.com/codeshackio/multi-select-dropdown-js/raw/main/path/to/multi-select-dropdown.js"></script>
<script>
new MultiSelect(document.getElementById('example-multi-select'));
</script>
You can pass a settings object to customize the dropdown:
new MultiSelect(document.getElementById('example-multi-select'), {
placeholder: 'Select options',
max: 5, // Maximum number of items that can be selected
search: true, // Enable the search box
selectAll: true, // Add a select all option
onChange: function(value, text, element) {
console.log('Change:', value, text, element);
},
onSelect: function(value, text, element) {
console.log('Selected:', value, text, element);
},
onUnselect: function(value, text, element) {
console.log('Unselected:', value, text, element);
}
});
Also, you can dynamically add the options:
new MultiSelect(document.getElementById('example-multi-select'), {
data: [
{
value: 'opt1',
text: 'Option 1'
},
{
value: 'opt2',
html: '<strong>Option 2 with HTML!</strong>'
},
{
value: 'opt3',
text: 'Option 3',
selected: true
},
{
value: 'opt4',
text: 'Option 4'
},
{
value: 'opt5',
text: 'Option 5'
}
],
placeholder: 'Select options',
max: 5, // Maximum number of items that can be selected
search: true, // Enable the search box
selectAll: true, // Add a select all option
onChange: function(value, text, element) {
console.log('Change:', value, text, element);
},
onSelect: function(value, text, element) {
console.log('Selected:', value, text, element);
},
onUnselect: function(value, text, element) {
console.log('Unselected:', value, text, element);
}
});
Distributed under the MIT License. See LICENSE
for more information.
David Adams - info@codeshack.io
GitHub: https://github.com/codeshackio/multi-select-dropdown-js
X (Twitter): https://twitter.com/codeshackio
Feel free to open an issue or submit pull requests.