hello guys, tweaked it a bit, add .cus-bulk-select to your select tag <select class="mdb-select cus-bulk-select" name="participants[]" multiple searchable="Search..." >....</select> //then use this alongside $('select.cus-bulk-select').each(function(){ let select_tag = $(this); let select_list = select_tag.parent().find('ul.multiple-select-dropdown'); let search_feild = select_list.find('span.search-wrap'); let instance_id = Math.floor((1 + Math.random()) * 0x10000)+'-'+Math.floor((1 + Math.random()) * 0x10000); let select_btn_div = '<li class="bulk-select-div"><div class="d-flex justify-content-around border-top border-bottom">'+ '<button class="btn btn-sm btn-flat border" type="button" id="select-all-'+instance_id+'">Select All</button>'+ '<button class="btn btn-sm btn-flat border" type="button" id="deselect-all-'+instance_id+'">Deselect All</button>'+ '</div></li>'; //determine placement of your bulk action buttons. I place it after search field if it exists if(search_feild.length){ search_feild.addClass('pb-0'); //reduce the padding bottom on the search search_feild.after(select_btn_div); }else{ select_list.prepend(select_btn_div); } let options_list = select_list.find('li:not(.bulk-select-div)'), select_all_btn = $('#select-all-'+instance_id), deselect_all_btn = $('#deselect-all-'+instance_id); select_all_btn.click(function(){ options_list.each(function(index){ if(!this.classList.contains('active')){ $(this).trigger('click'); } }) }) deselect_all_btn.click(function(){ options_list.each(function(index){ if(this.classList.contains('active')){ $(this).trigger('click'); } }) }) })   //dont forget this css .bulk-select-div:hover{ background: none !important; }

---

Hi, You can use the following code: HTML: <div class="container"> <select id="multi-select" class="mdb-select colorful-select dropdown-primary" multiple> <option value="" disabled selected>Choose your country</option> <option value="1">USA</option> <option value="2">Germany</option> <option value="3">France</option> <option value="4">Poland</option> <option value="5">Japan</option> </select> <button class="btn-save btn btn-primary btn-sm">Save</button> <button class="btn-save btn btn-primary btn-sm" id="select-all">Select all</button> </div> JS: $('#select-all').on('click', function() { let values = []; let texts = []; let index = 0; $('#multi-select option').each(function() { let value = $(this).val(); let text = $(this)[0].textContent; if (value) { values.push(value); texts.push(text); let liElement = $(this).parent().parent().find('.dropdown-content li')[index]; if(!liElement.classList.contains('active')) { $(liElement).trigger('click'); } } index++; }) }) Regards

---

Can someone help to add "select all"  feature in multi select dropdown?

---

can you please add select all option for multiselect early

---

We'll discuss adding this option to multiselect. Thanks for advice

---