Select2 的预填充值（带有标记）未出现在页面中答案

【问题标题】：Prepopulate values of Select2 (with tagging) doesn't appeare in pageSelect2 的预填充值（带有标记）未出现在页面中
【发布时间】：2016-02-04 07:48:39
【问题描述】：

有很多关于 Select2 v4+ 的讨论，以及描述所选元素的预填充的答案。但它在我的情况下接缝它根本不起作用。也许是因为我使用的是 Select2 的tag option。这是我的 HTML：

<select class="form-control" id="newProgrTrack" multiple="multiple">
 <option> Sony</option>
 <option> HP</option>
 <option> Dell</option>
 <option> Apple</option>
</select>
<script type="text/javascript">
    $(document).ready(function(){
        $('#newProgrTrack').select2({
            placeholder: "Select a brands or add one, by typing in",
            tags: true,
            // tokenSeparators: [',', ' ']
        });
    });
</script>

我从服务器以 JSON 格式获得 ajax 响应，其中描述了已选择的选项。所以我需要在 select2 中预先填充它们作为用户的标签。更远的用户应该可以选择从选项列表中添加或删除选项，并添加新的选项，目前还不能作为选择选项使用。

brands: ['Sony','Dell'] //server response

因此，就我将一直从用户那里获得新的选择选项而言，我不想坚持价值属性，而是坚持标签的文本（但我两者都尝试）。我得到的最接近的是下面的 Jquery 代码（在 select2 初始化之后）：

$('#newProgrTrack').val(['Sony', 'Dell']);

当我在 console.log 之后 - 我得到带有 ['Sony', 'Dell'] 的数组，但是这个标签没有出现在 HTML 页面上。请帮忙。

【问题讨论】：

标签： jquery html jquery-select2

【解决方案1】：

$('#newProgrTrack').val(['Sony', 'PQRS']).trigger('change');

您必须手动触发更改方法

【讨论】：

谢谢，它成功地允许我显示值，如果它们存在于
哈哈，你必须将它附加到选项中。没有别的办法。

【解决方案2】：

官方文档的 Programmatic control 章节在 Add, select or clear item 部分对此进行了介绍。

https://select2.org/programmatic-control/add-select-clear-items

对于附加项目：

如果不存在则创建

如果选项已经存在，您可以使用 .find 来选择它，并且否则创建它：

// Set the value, creating a new option if necessary if
 ($('#mySelect2').find("option[value='" + data.id + "']").length) {
     $('#mySelect2').val(data.id).trigger('change'); } else { 
     // Create a DOM Option and pre-select by default
     var newOption = new Option(data.text, data.id, true, true);
     // Append it to the select
     $('#mySelect2').append(newOption).trigger('change'); }

要使用以前存储的值预先填充 select2 控件，您需要按照数据源的相应说明进行操作。在您的情况下，您似乎是在内联值而不是使用 ajax，因此以下部分适用。

选择选项

要以编程方式为 Select2 控件选择选项/项目，请使用 jQuery .val() 方法：
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed 
你也可以将数组传递给 val make multiple 选择：
$('#mySelect2').val(['1', '2']); $('#mySelect2').trigger('change'); //Notify any JS components that the value changed 
Select2 将监听对于它附加到的元素上的更改事件。当您进行任何需要反映的外部更改时 Select2（比如改变值），应该触发这个事件。

【讨论】：