How to set value to display instead of text in select2

Question

$('select').select2({width:"300"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="convertIt" multiple>
    <option value="A">Australia</option>
    <option value="U">US </option>
    <option value="J">Japan</option>
    <option value="E">Europe</option>
    <option value="C">Canada</option>
  </select>

I also tried with id but not worked

$('#convertIt').select2({
    placeholder: "Select an country"
}).select2("data",
     [{"id":"test1","text":"Henry Ford"},{"id":"test2","text":"Tom Phillips"}]
);

Thanks

Answer 1

function formatSelection(val) {return val.id;}

$('select').select2({templateSelection: formatSelection,width:"300"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="convertIt" multiple>
    <option value="A">Australia</option>
    <option value="U">US </option>
    <option value="J">Japan</option>
    <option value="E">Europe</option>
    <option value="C">Canada</option>
  </select>

Answer 2

Try this :

function formatSelection(val) {
  return val.id;
}

$('#convertIt').select2({
    placeholder: "Select an country",
    formatSelection: formatSelection,
}).select2("data",
     [{"id":"test1","text":"Henry Ford"},{"id":"test2","text":"Tom Phillips"}]
);