title: Select2 with Backbone.Marionette: Pre-selected values not hidden
body: <p>I am trying to integrate Select2 within a Marionette ItemView.</p>
  
  <p>The problem: I want to initialize the Select2 with already-selected values, but the selected elements are still available in the dropdown. If I clear the box then manually reselect the items from the dropdown, the items are then properly removed from the dropdown.</p>
  
  <p>Javascript:</p>
  
  <pre><code>View.Profile = Marionette.ItemView.extend({
      template: profileTpl,
      onShow: function(){
        var $select = this.$("#categories"); // grabs the element for Select2
        $select.select2();                   // build the Select2 element
        $select.select2("val", ["american", "french", "italian"]); // select values
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="categories" data-placeholder="Add a category..." multiple class="form-control" tabindex="8"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option value="american"&gt;American&lt;/option&gt;
    &lt;option value="french"&gt;French&lt;/option&gt;
    &lt;option value="italian"&gt;Italian&lt;/option&gt;
    &lt;option value="indian"&gt;Indian&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I can do this on a single html example page with no trouble. </p>
  
  <p>Using Marionette's onShow, the "tag" elements correctly displayed in the Select2 box, but when I click the box to select different options, all options are still available.</p>
  
  <p>I suspect there is some event not properly attached to the Select2 element because of the way I'm attaching the Select2 element in the onShow event.</p>