jQuery Select2 issue with shown selection
<p>I am working on a select menu where I use Select-2 plugin to customize it as I would like to. Thereby I have an issue I try to recreate the selected items in the input field. So when you select an item it appear as small grey list item in the input field.</p>

<p>Here is a <strong><a href="http://jsfiddle.net/sylvanR/041k90py/2/" rel="nofollow noreferrer">FIDDLE</a></strong> which shows the issue I have.</p>

<p>There by this is the javascript code how I render my input field:</p>

<pre><code>var selectMenuItems = [
        {id: 'restaurant', value: 'restaurant'},
        {id: 'shopping', value: 'shopping'},
        {id: 'toilet', value: 'toilet'}
    ]

     function formatSelectItem (selectItem) {
        if (!selectItem.id) { return selectItem.value; }
        var $selectItem = $(
        '&lt;img src="img/markers/'+ selectItem.id.toLowerCase() +'.png"/&gt;' +
        '&lt;span class="select-item-text"&gt;'+ selectItem.value+"&lt;/span&gt;"
        );
        return $selectItem;
    };

    $("[name='select']").select2({
        placeholder: "Selecteer een categorie",
        templateResult: formatSelectItem,
        data: selectMenuItems
    }).on("change", function(e){
        console.log(e);

        $('.select-multiple :selected').each(function(i, selected) {
            var selectedValue = $(selected).val();

            $('.select2-selection__choice').text(selectedValue);
        });
    });
</code></pre>

<p>The problem is that when I select an item it appears with text inside the input field but if I select multiple all the items will change to that last selected item text. How can I only bind this <code>.text()</code> to that specific select item?</p>

<p>In the documentation of the plugin <a href="https://select2.github.io/examples.html" rel="nofollow noreferrer">Select-2 plugin</a> there is an example of called "Templating" where they don't have to appent the text or image to the selected item..</p>