jquery - Select2 Display Different Value after selection -

i trying find updated answer question here seems formatselection option select2 no longer work, or not working me.

basically, have multi-select select2 menu , have option's value displayed after being selected rather being text description. instance, have list of provinces each 1 has shorthand value on option (ab alberta, bc british columbia, etc.) those ones have displayed after being selected. there simple way of doing in select2 4.0.0?

markup:

<select id="provselect" multiple data-role="none" >  </select> 

for js:

$("#provselect").select2({           width:"100%",           formatselection: formatselection}); 

with appropriate function:

function formatselection(item){          return item.id; } 

select2 still has formatting api, it's called templating now. example:

function formatstate (state) {     if (!state.id) { return state.text; }     var $state = $(         '<span><img src="vendor/images/flags/' + state.element.value.tolowercase() + '.png" class="img-flag" /> ' + state.text + '</span>'     );     return $state; };  $(".js-example-templating").select2({     templateselection: formatstate }); 

you can template result , selection differently; docs here.