title: select2 show checkboxes in a multi select
body: <p>Here's my jsfiddle: <a href="http://jsfiddle.net/LUsMb/2779/" rel="nofollow">http://jsfiddle.net/LUsMb/2779/</a></p>
  
  <p>What I'm attempting to do is make a checkbox-selectable select2 that shows how many items you have selected, instead of showing the item list. Everything works except for de-selecting an item. I think this is because I call <code>evt.preventDefault</code> in the <code>select2-selecting</code> event. Here is my code for that particular event:</p>
  
  <pre><code>.on('select2-selecting', function(evt) {
      var newValue = evt.object.value;
      var found = false;
      var me = this;
      var $me = $(me);
      var arr = $me.select2('data');
      arr.forEach(function(e) { 
          if(found) return;
          if(newValue === e.value) {
              found = true;
              var index = arr.indexOf(e);
              if(index === -1) console.error(e,"NOT FOUND IN ARRAY. ABORT ABORT ABORT.");
              arr.splice(index, 1);
              $me.select2('data',arr);
              changeText(me);
              evt.preventDefault();
          }
      });
  </code></pre>
  
  <p>I do <code>evt.preventDefault()</code> because I want to remove the item from the select2 data list instead of adding it again (because I don't want to have it work the traditional way). Unfortunately, when I go to de-select an item it does all of the updating correctly, except for in select2 - the display list is not updated properly. I could always close and re-open the list, but I strongly prefer not to do that. </p>
  
  <p>Has anyone done this successfully before? Or maybe would know where to go from here?</p>