select2 没有名字的标签

Question

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

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

即["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 here。主要问题是您错过了正确的选择器。

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

可以看到直播fiddlehere

如

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

参考 Select2 文档 Programmatic Access

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

select2 没有名字的标签

select2 tags with no names

jquery

jquery-select2-4

select2