title: select2 allowClear not enabled when options set dynamically
body: <p>When I create select2 dropdowns that are dynamically driven by the selection in another select2 dropdown, the <code>allowClear</code> button for the updated dropdown becomes disabled.</p>
  
  <p>It doesn't seem to matter if I build select2 on a <code>select</code>, destroy it, update the html, and rebuild it:</p>
  
  <pre><code>var enableSelect2 = function () {
          $(this).select2({
              width: '200px',
              allowClear: true,
              minimumResultsForSearch: 7,
              formatResult: function (result, container, query, escapeMarkup) {
                  var markup = [];
                  markMatchedSelect2Text(result.text, query.term, markup, escapeMarkup);
                  return markup.join('');
              }
          });
      },
      populateDropdown = function () {
          var filterBy = this.id,
              t = $(this);
          $.ajax({
              type: 'post',
              url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(),
              success: function (data) {
                  var toRebuild,
                      target;
                  if (filterBy === 'panel_id') {
                      toRebuild = $('#isp_id, #package_id');
                      target =  $('#isp_id');
                  } else {
                      toRebuild = $('#package_id');
                      target = $('#package_id');
                  }
                  toRebuild.each(function () {
                      $(this).select2('destroy');
                  });
                  target.html(data);
                  if (filterBy === 'panel_id') {
                      $('#package_id').html($(document.createElement('option')).attr('value', 0).text('Select ISP first\u2026'));
                  }
                  toRebuild.each(enableSelect2);
              }
          });
      };
  
  $('body').on('change', '#searchForm #isp_id, #searchForm #panel_id', populateDropdown);
  </code></pre>
  
  <p>Or if I use JSON with a hidden input:</p>
  
  <pre><code>$(function() {
      var data = [
          [{id:0,text:'black'},{id:1,text:'blue'}],
          [{id:0,text:'9'},{id:1,text:'10'}]
      ];
  
      $('#attribute').select2({allowClear: true}).on('change', function() {
          $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true});
      }).trigger('change');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eGXPe/116/">http://jsfiddle.net/eGXPe/116/</a></p>
  
  <p>Any ideas why the clear button disappears?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Apologies that I did not clarify my html.  In my code, every <code>select</code> has a <code>data-placeholder</code> attribute.  This is not in the fiddle I provided, as it was not originally my fiddle but borrowed from another SO question.  I have now updated that fiddle with data-placeholder and it works: <a href="http://jsfiddle.net/eGXPe/119/">http://jsfiddle.net/eGXPe/119/</a>.</p>
  
  <p>Here is the twig code for my html which I did not previously include:</p>
  
  <pre><code>&lt;li&gt;
      &lt;label for="edit[panel_id]" class="hidden"&gt;Edit Panel ID?&lt;/label&gt;
      &lt;input type="checkbox" id="edit[panel_id]" name="edit[panel_id]" /&gt;
      &lt;label for="panel_id"&gt;Panel:&lt;/label&gt;
      &lt;select id="panel_id" name="panel_id" data-placeholder="Select a panel"&gt;
          &lt;option&gt;&lt;/option&gt;
          {% for panel in related.panel_id %}
              &lt;option value="{{ panel.value }}"&gt;{{ panel.name }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;label for="edit[isp_id]" class="hidden"&gt;Edit ISP ID?&lt;/label&gt;
      &lt;input type="checkbox" id="edit[isp_id]" name="edit[isp_id]" /&gt;
      &lt;label for="isp_id"&gt;ISP:&lt;/label&gt;
      &lt;select id="isp_id" name="isp_id" data-placeholder="Select an ISP"&gt;
          &lt;option&gt;&lt;/option&gt;
          {% for isp in related.isp_id %}
              &lt;option value="{{ isp.value }}"&gt;{{ isp.name }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;label for="edit[package_id]" class="hidden"&gt;Edit Package ID?&lt;/label&gt;
      &lt;input type="checkbox" id="edit[package_id]" name="edit[package_id]" /&gt;
      &lt;label for="package_id"&gt;Package:&lt;/label&gt;
      &lt;select id="package_id" name="package_id" data-placeholder="Select a package"&gt;
          &lt;option&gt;&lt;/option&gt;
          &lt;option value="0"&gt;Select ISP first&amp;hellip;&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  </code></pre>