select all option multiselect dropdown

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: select all option multiselect dropdown

ganesh55 asked 7 years ago

Mikołaj Smoleński staff answered 7 years ago

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

ganesh55 commented 7 years ago

Hi, Thanks for your response. Eagerly waiting for your comments on this. Regards, Ganesh

nagajyothi answered 7 years ago

can you please add select all option for multiselect early

ganesh55 answered 7 years ago

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

Mikołaj Smoleński staff answered 7 years ago

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

ganesh55 commented 7 years ago

its not work. i want select all check box checked remaing checkboxes will check autometically in dropdown

Mikołaj Smoleński staff commented 7 years ago

Do You have any errors in Your console?

ganesh55 commented 7 years ago

i dont want button in dropdown, i want only selectall checkbox

Mikołaj Smoleński staff commented 7 years ago

There is no such functionality for this moment.

dashingswags pro answered 6 years ago

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; }

Sebastian Kaczmarek staff pro premium commented 6 years ago

As of the 4.5.9 version no hacks are needed for this. The multiselect has "Toggle all" option out of the box. Check it out here: https://mdbootstrap.com/changelog/#v4-5-9

dashingswags pro commented 6 years ago

Just checked. my project is on mdb 4.5 and migrating might take a while because of the multiple changed syntax involved which would be needed. Thanks all the same

dashingswags pro commented 6 years ago

4.5.0 to be precise
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
ganesh55
20Support score
6Questions 1Answers
0Snippets likes 0Snippets