Skip to content

Commit 92b6f54

Browse files
authored
Update README.md
1 parent 4d64ead commit 92b6f54

File tree

1 file changed

+57
-2
lines changed

1 file changed

+57
-2
lines changed

README.md

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Create powerful user interfaces with our **Multi Select Dropdown**! This tool en
66
The complete guide and reference is available here: [https://codeshack.io/multi-select-dropdown-html-javascript/](https://codeshack.io/multi-select-dropdown-html-javascript/)
77

88
## Features
9-
- **Multiple Selections**: Users can select more than one option.
9+
- **Multiple Selections**: Users can select more than one option in the dropdown.
1010
- **Search Functionality**: Includes a built-in search to find options quickly.
1111
- **Dynamic Content**: Options can be dynamically added to the dropdown.
1212
- **Customizable UI**: Style the dropdown to match your site with minimal CSS.
@@ -59,7 +59,59 @@ new MultiSelect(document.getElementById('example-multi-select'), {
5959
placeholder: 'Select options',
6060
max: 5, // Maximum number of items that can be selected
6161
search: true, // Enable the search box
62-
selectAll: true // Add a select all option
62+
selectAll: true, // Add a select all option
63+
onChange: function(value, text, element) {
64+
console.log('Change:', value, text, element);
65+
},
66+
onSelect: function(value, text, element) {
67+
console.log('Selected:', value, text, element);
68+
},
69+
onUnselect: function(value, text, element) {
70+
console.log('Unselected:', value, text, element);
71+
}
72+
});
73+
```
74+
75+
Also, you can dynamically add the options:
76+
77+
```javascript
78+
new MultiSelect(document.getElementById('example-multi-select'), {
79+
data: [
80+
{
81+
value: 'opt1',
82+
text: 'Option 1'
83+
},
84+
{
85+
value: 'opt2',
86+
html: '<strong>Option 2 with HTML!</strong>'
87+
},
88+
{
89+
value: 'opt3',
90+
text: 'Option 3',
91+
selected: true
92+
},
93+
{
94+
value: 'opt4',
95+
text: 'Option 4'
96+
},
97+
{
98+
value: 'opt5',
99+
text: 'Option 5'
100+
}
101+
],
102+
placeholder: 'Select options',
103+
max: 5, // Maximum number of items that can be selected
104+
search: true, // Enable the search box
105+
selectAll: true, // Add a select all option
106+
onChange: function(value, text, element) {
107+
console.log('Change:', value, text, element);
108+
},
109+
onSelect: function(value, text, element) {
110+
console.log('Selected:', value, text, element);
111+
},
112+
onUnselect: function(value, text, element) {
113+
console.log('Unselected:', value, text, element);
114+
}
63115
});
64116
```
65117

@@ -74,6 +126,9 @@ Distributed under the MIT License. See `LICENSE` for more information.
74126
## Contact
75127

76128
David Adams - [[email protected]](mailto:[email protected])
129+
77130
GitHub: [https://github.com/codeshackio/multi-select-dropdown-js](https://github.com/codeshackio/multi-select-dropdown-js)
78131

132+
X (Twitter): [https://twitter.com/codeshackio](https://twitter.com/codeshackio)
133+
79134
Feel free to open an issue or submit pull requests.

0 commit comments

Comments
 (0)