title: Select2 with multiple nested groups
body: <p>I'm having trouble using the Select2 with various groups, only the latter appears. </p>
  
  <pre><code>&lt;select name="txtConta" id="txtConta" data-placeholder="Selecione a conta"&gt;         
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="S11892"&gt;2 - Gastos&lt;/option&gt;
      &lt;option value="S11893"&gt;2.1 - DESPESA OPERACIONAL FIXA&lt;/option&gt;
      &lt;option value="S11895"&gt;2.1.1 - PESSOAL&lt;/option&gt;
      &lt;option value="S11915"&gt;2.1.1.1 - GERENCIA/ADMINSTRATIVO&lt;/option&gt;
      &lt;option value="11916"&gt;2.1.1.1.1 - SAL&amp;#193;RIOS&lt;/option&gt;
      &lt;option value="11917"&gt;2.1.1.1.2 - DIVIDENDOS / COMISS&amp;#213;ES /BONUS&lt;/option&gt;
      &lt;option value="11918"&gt;2.1.1.1.3 - INSS&lt;/option&gt;
      &lt;option value="11919"&gt;2.1.1.1.4 - FGTS&lt;/option&gt;
      &lt;option value="11920"&gt;2.1.1.1.5 - IRRF COD. 0561&lt;/option&gt;
      &lt;option value="11921"&gt;2.1.1.1.6 - PLANO DE SAUDE&lt;/option&gt;
      &lt;option value="11922"&gt;2.1.1.1.7 - TICKET REFEICAO&lt;/option&gt;
      &lt;option value="11923"&gt;2.1.1.1.8 - VALE TRANSPORTE&lt;/option&gt;
      (...)
  &lt;/select&gt;
  
  &lt;script&gt;
  $('select').each(function () {
      $(this).select2({
          allowClear: true,
          width: 'resolve',
          dropdownAutoWidth: true
      });
  });
  
  $('#txtConta').find('option').each(function () {
      if ($(this).attr("value").indexOf('S') == 0) {
          $('&lt;optGroup/&gt;').attr('label', $(this).text()).appendTo($('#txtConta'));
          $(this).remove();
      } else {
          $('#txtConta').find('optGroup').last().append($(this));
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>You can see a demonstration in this <a href="http://jsfiddle.net/fabiofreitas/0hhjv3sn/" rel="noreferrer">jsfiddle</a>.</p>