Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork14
Customizable Multi Select Dropdown built with HTML and JavaScript, featuring search, select-all, and dynamic options without dependencies.
License
codeshackio/multi-select-dropdown-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Create powerful user interfaces with ourMulti 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/
Demo:https://codeshack.io/multi-select-dropdown-js/
- Multiple Selections: Users can select more than one option in the dropdown.
- Search Functionality: Includes a built-in search to find options quickly.
- Dynamic Content: Options can be dynamically added to the dropdown.
- Customizable UI: Style the dropdown to match your site with minimal CSS.
- Lightweight: Lightweight in size and does not depend on other libraries.
- Flexible: Convert your existing native select elements with minimal configuration.
Clone the repository and include the CSS and JavaScript files in your project.
Add the following to thehead tag:
<linkrel="stylesheet"href="path/to/multi-select-dropdown.css">
Append the following to thebody tag:
<scriptsrc="path/to/multi-select-dropdown.js"></script>
Here's a simple example to add the multi-select dropdown to your project:
<selectid="example-multi-select"data-placeholder="Select options"multiple="multiple"data-multi-select><optionvalue="option1">Option 1</option><optionvalue="option2">Option 2</option><!-- more options --></select>
Or:
<selectid="example-multi-select"data-placeholder="Select options"multiple="multiple"><optionvalue="option1">Option 1</option><optionvalue="option2">Option 2</option><!-- more options --></select><scriptsrc="path/to/multi-select-dropdown.js"></script><script>newMultiSelect(document.getElementById('example-multi-select'));</script>
You can pass a settings object to customize the dropdown:
newMultiSelect(document.getElementById('example-multi-select'),{placeholder:'Select options',max:5,// Maximum number of items that can be selectedsearch:true,// Enable the search boxselectAll:true,// Add a select all optiononChange: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:
newMultiSelect(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 selectedsearch:true,// Enable the search boxselectAll:true,// Add a select all optiononChange: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. SeeLICENSE 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.
About
Customizable Multi Select Dropdown built with HTML and JavaScript, featuring search, select-all, and dynamic options without dependencies.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.