title: How can i add extra field on this select2 form
body: <p>I am trying to get more field filled with a select2 drop-down menu.
  Check this fiddle:
  <a href="http://jsfiddle.net/ws3tjp5f/" rel="nofollow noreferrer">http://jsfiddle.net/ws3tjp5f/</a></p>
  
  <p>I want the <code>"Select extra"</code> to be populated too.
  But with a different value.</p>
  
  <p>Now I can print id &amp; text, I want to store and print one more value <code>"extra"</code></p>
  
  <p><strong><em>html:</em></strong></p>
  
  <pre><code>&lt;input type="hidden" id="test" /&gt;
  &lt;p&gt;Selected IDs: &lt;input type="text" id="selectedID"/&gt;&lt;/p&gt;
  &lt;p&gt;Selected Options: &lt;input typ="text" id="selectedText"/&gt;&lt;/p&gt;
  &lt;p&gt;Selected Extra Field: &lt;input typ="text" id="selectedExtra"/&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>var test = $('#test');
  $(test).select2({
  placeholder: "Choose",
  data:[
      {id:0,text:"enhancement"},
      {id:1,text:"bug"},
      {id:2,text:"duplicate"},
      {id:3,text:"invalid"},
      {id:4,text:"wontfix"}
  ],
  width: "300px"
  });
  
  $(test).change(function() {
  
  var theID = $(test).select2('data').id;
  var theSelection = $(test).select2('data').text;
  var theExtra = $(test).select2('data').text;
  $('#selectedID').val(theID);
  $('#selectedText').val(theSelection);
  $('$selectedExtra').val(theExtra);
  });
  </code></pre>