Как установить значение для отображения вместо текста в выбор2

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>

Я также попытался с id, но не работал

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

Благодаря

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

Попробуйте это:

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"}] 
);