select2 tags with no names

Question

I'm using this bit of code to apply the tags of selections made on a previous page which were saved to the db.

It creates the tags but does not put the text in them just puts a X to remove it. selected is an array of possible locations.

i.e ["work", "home", "away", "Hong Kong", "Manchester".......]

var selected = this.location
var $element = $("#location").select2();
for (var d = 0; d < selected.length; d++) {
    var item = selected[d];
    var option = new Option(item.text, item.id, true, true)
    $element.append(option);
}

any help would be appreciated as all the select2 issues on here seem to be mainly dealing with static data or are to advanced for my current level of knowledge.

As requested,

Thats all there is to it code wise. I just want text in the tags

It currently looks like this http://prntscr.com/a1h2nu I need it to look like this http://prntscr.com/a1h33w

Here is the HTML

  <div class="form-group">
        <label for="location" class="col-lg-3 control-label">Location</label>
        <div class="col-lg-8">
            <select class="form-control" id="location" multiple="multiple" style="width: 100%">
            </select>
            <span class="help-block"></span>
        </div>
    </div>



var item = selected[d];
console.log(item);
var option = new Option(item.text, item.id, true, true)
console.log(option);
$element.append(option);

this it the dev tools output http://prntscr.com/a1hdf7

Answer 1

Well it was a simple fix From this...

var item = selected[d];
console.log(item);
var option = new Option(item.text, item.id, true, true)
console.log(option);
$element.append(option);

To this...

var item = selected[d];
console.log(item);
var option = new Option(item, item.id, true, true)
console.log(option);
$element.append(option);