title: select2: cannot read property 'id' of undefined
body: <p>I used Select2 4.0.6, I have a bug like below:</p>
  <p>allowClear gives &quot;Uncaught TypeError: Cannot read property 'id' of undefined&quot; when used on select.</p>
  <p>How can I fix this bug?.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; 
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;select role="select" id="myoption"&gt;
          &lt;option value="001"&gt;abcs &lt;/option&gt;&lt;option value="002"&gt;dshdsh&lt;/option&gt;&lt;option value="003"&gt;A&lt;/option&gt;
          &lt;option value="004"&gt;ANAM CO&lt;/option&gt;
      &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
      $("#myoption").select2({
          allowClear: true,
          width: '300px',
          height: '34px'
          //data: data
      });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>