Question

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

false%2

我在JSON中从服务器获得ajax响应，描述了哪些选项已被选中。所以我需要在select2中预先填充它们作为用户的标签。更远的用户应该有选择添加或删除选项列表中的选项，并添加新选项，这是现在的选择选项不可用。

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

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

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

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

Answer 1

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

您必须手动触发更改方法

Answer 2

官方文档的程序控制章节在添加，选择或清除项目部分中介绍了这一点。

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会听对于它所附加的元素的更改事件。当您进行任何需要反映的外部更改时选择2（例如更改值），您应该触发此事件。

预填充Select2的值（带标记）不会显示在页面中

2 个答案: