jquery - select2 没有名称的标签

Question

我正在使用这段代码来应用在前一页上所做的选择的标签，这些标签已保存到数据库中。

它创建标签但不将文本放入其中，只是放置一个 X 来删除它。selected 是一组可能的位置。

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

任何帮助都将不胜感激，因为这里的所有 select2 问题似乎主要是处理静态数据，或者是为了提高我目前的知识水平。

按照要求，

这就是代码方面的全部内容。我只想要标签中的文字

它目前看起来像这样http://prntscr.com/a1h2nu 我需要它看起来像这样http://prntscr.com/a1h33w

这是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);

这是开发工具输出 http://prntscr.com/a1hdf7

Answer 1

编辑更新的 jsFiddle 可以在这里找到。主要问题是您错过了正确的选择器。

为了让 Select2 考虑您的更改，您需要触发更改，以便重新评估控件。

你可以在这里看到一个现场小提琴

如在

$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

参考 Select2 文档编程访问

Answer 2

好吧，这是一个简单的修复从这里...

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

对此...

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