I would like a dropdown of text and then when one is selected I would like to load the full value as the tag and have it behave as normal.

I'm capturing the values selected then clearing the list and appending them as text into the `.select2-choices` div. It appears to work as it should but I've lost the ability to **clear** the manually appended tags.

**Markup:**

```
<div id="select2-container">
    <select multiple class="select2" id="select2">
        <optgroup label="GroupName">
            <option value="John Smith - GroupName (ID:12345678)">John Smith</option>
        </optgroup>
    </select>
</div>

```

**Script:**

```
$('#select2').select2({               
    }).on('change', function (e) {
        values = $(this).val();
        console.log(values);
        $('#select2-container .select2-choices').empty();
        for (var i = 0; i < values.length; i++) {
            console.log(values[i]);
            $('#select2-container .select2-choices').append('<li class="select2-search-choice"><div>' + values[i] + '</div><a href="#" class="select2-search-choice-close" tabindex="-1"></a></li>');
        }
    });

```

I'm going to look into the formatSelection function but any help is greatly appreciated.