Labels

Monday, November 24, 2014

select2 selectable group and Select All function

Hi All,

If you want to select all the child element when selecting the group name, using select2 this is the post for you.  I have added the select All chcekbox also.

here is the html part you need to add.
<input type="hidden" id="fruitSelect" value="" style="width:300px;" /><br />
<br/><input type="checkbox" id="checkbox" />Select All
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div> 


add the following to the Javascript  file, inside the $document.ready function.
 var FRUIT_GROUPS = [  
   {  
     id: '',  
     text: 'Citrus',  
     children: [  
       { id: 'c1', text: 'Grapefruit' },  
       { id: 'c2', text: 'Orange' },  
       { id: 'c3', text: 'Lemon' },  
       { id: 'c4', text: 'Lime' }  
     ]  
   },  
   {  
     id: '',  
     text: 'Other',  
     children: [  
       { id: 'o1', text: 'Apple' },  
       { id: 'o2', text: 'Mango' },  
       { id: 'o3', text: 'Banana' }  
     ]  
   }  
 ];  
 $('#fruitSelect').select2({  
   multiple: true,  
   placeholder: "Select fruits...",  
   data: FRUIT_GROUPS,  
   query: function(options) {  
     var selectedIds = options.element.select2('val');  
     var selectableGroups = $.map(this.data, function(group) {  
       var areChildrenAllSelected = true;  
       $.each(group.children, function(i, child) {  
         if (selectedIds.indexOf(child.id) < 0) {  
           areChildrenAllSelected = false;  
           return false; // Short-circuit $.each()  
         }  
       });  
       return !areChildrenAllSelected ? group : null;  
     });  
     options.callback({ results: selectableGroups });  
   }  
 }).on('select2-selecting', function(e) {  
   var $select = $(this);  
   if (e.val == '') {  
     e.preventDefault();  
     $select.select2('data', $select.select2('data').concat(e.choice.children));  
     $select.select2('close');  
   }  
 });  
 $('#showValue').click(function() {  
   $('#output').text($('#fruitSelect').val());  
 });  
 $("#checkbox").click(function(){  
  if($("#checkbox").is(':checked') ){  
  $('#fruitSelect').select2("val", "");  
  for(var index in FRUIT_GROUPS){  
    $('#fruitSelect').select2('data', $('#fruitSelect').select2('data').concat(FRUIT_GROUPS[index].children));  
  }}else{  
      $('#fruitSelect').select2("val", "");  
    }  
  });   

Demo

I have added the demo for the easiness of understanding.  I haven't describe the code much since its easy to understand. if you have any questions feel free to ask.

Have Fun.

4 comments:

  1. I'm trying to convert exactly this on a dataset retrieved via ajax. Have you tried anything like that?

    ReplyDelete
    Replies
    1. Hi, sorry for the late reply.
      were you able to fix your issue ? you want to change the FRUIT_GROUPS text right?

      Delete
  2. Can you migrate this to 4.0.2 ? Or explain what's going on so I may port it

    ReplyDelete
    Replies
    1. query option is not available with the select2 4.0+ versions. so migrating the exact code might be bit difficult.

      Delete