select2 - get ID, VAL, TEXT

by Friiz

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

 <select id="select-test">
   <option></option>
   <option value="5-val" id="first-id" class="option-item">  First option</option>
   <option value="18-val" id="second-id" class="option-item">  Second option</option>
   <option value="25-val" id="third-id" class="option-item">  Third option</option>
   <option value="29-with-txt-val" id="fourth-id" class="option-item">  Fourth option</option>
   <option value="55-val" id="fifth-id" class="option-item">  Fifth option</option>
   <option value="text-value-val" id="sixth-id" class="option-item">  Sixth</option>
</select>

<div id="result">
  Value :   <strong>  <span id="val">  </span></strong><br>
  Id :      <strong>  <span id="id">  </span></strong><br>
  Text :    <strong>  <span id="text">  </strong></span>
</div>

CSS

option:checked{
  display: none;
}

JavaScript

$(document).ready(function(){
    $('#select-test').select2({
    placeholder: "Choose option",
    width: "20%",
 });
  
  $('#select-test').change(function(){
 
     $('#val').html($('#select-test').find('.option-item:hidden').val());
     $('#id').html($('#select-test').find('.option-item:hidden').attr('id'));
     $('#text').html($('#select-test').find('.option-item:hidden').text());
  });
});