• 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');
});