select all option multiselect dropdown

Topic: select all option multiselect dropdown

ganesh55 free asked 6 years ago

Add comment

dashingswags pro answered 5 years ago

0 0 Best answer

hello guys, tweaked it a bit, add .cus-bulk-select to your select tag

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

Please insert min. 20 characters.

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 commented 5 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 5 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 5 years ago

4.5.0 to be precise

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 6 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 6 years ago

Do You have any errors in Your console?

ganesh55 free commented 6 years ago

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

Mikołaj Smoleński staff commented 5 years ago

There is no such functionality for this moment.

Add comment

ganesh55 free answered 6 years ago

0 0 Best answer