- single select dropdown
- Multi-select dropdown
- search dropdown list
- arrows keys support
- limit the number of items displayed in a dropdown
- custom sort
- Listed items in separate boxes
- Custom header and Placeholder and icons
- Select all and Clear all options
- Action Buttons like Submit and Cancel
- Custom themes
- Badges like count
Demo : https://drop2.netlify.app/
https://github.com/Thamilgnanasambandan-st/Select2
$('#demo').drop2()
Show selected options count
type: boolean
default: false
Example: Example:
$('#demo').drop2({
countBadge: true
});
Show Selected options separately
type: boolean
default: false
Example:
$('#demo').drop2({
selectedDrawer: true
});
Show Selected options separately
Example:
$('#demo').('['v1']')
$('#car').drop2('updateList');
We can define custom headers with icons but its not placeholder
type: boolean
default: false
Example:
$('#demo').drop2({
customeheader :' <i class="fa-solid fa-download"></i> Select User',
});
This is define number of items shows in drawer
type: Number
default: 5
Example:
$('#demo').drop2({
customeheader :' <i class="fa-solid fa-download"></i> Select User',
});
triggers when drop2 is open
Example:
$(document).on('drop2-select-show', '#demo, function(){
console.log('trigerrred - S');
});
triggers when drop2 is close
Example:
$(document).on('drop2-select-hide', '#demo, function(){
console.log('trigerrred - H');
});
triggers when drop2 multiple options submitted
Example:
$(document).on('drop2-select-submitted', '#demo', function(){
console.log('trigerrred - H');
});