title: How to set value to display instead of text in select2
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').select2({width:"300"});</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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.3/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;select id="convertIt" multiple&gt;
      &lt;option value="A"&gt;Australia&lt;/option&gt;
      &lt;option value="U"&gt;US &lt;/option&gt;
      &lt;option value="J"&gt;Japan&lt;/option&gt;
      &lt;option value="E"&gt;Europe&lt;/option&gt;
      &lt;option value="C"&gt;Canada&lt;/option&gt;
    &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried with <code>id</code> but not worked </p>
  
  <pre><code>$('#convertIt').select2({
      placeholder: "Select an country"
  }).select2("data",
       [{"id":"test1","text":"Henry Ford"},{"id":"test2","text":"Tom Phillips"}]
  );
  </code></pre>
  
  <p>Thanks</p>