Select2 4.0.0 多值选择框 - 初始选择

Question

我正在尝试让 Select2 (4.0.0rc1) 多值选择框预加载数据，但它不起作用。

HTML

  <select id="sj" class="js-example-basic-multiple form-control" multiple="multiple">
    <option value="1">Tickets</option>
    <option value="2">PArking</option>
    <option value="3">Special Events</option>
    <option value="4">Athletics</option>
  </select>

JavaScript

$(document).ready(function() {
  $("#sj").select2();
  $("#example tbody").on("click", "tr",function(){
    var defaultData = [{id:1, text:'Tickets'},{id:2,text:'Parking'},{id:3,text:'Athletics'}];
    $("#sj").select2({data:defaultData});
  });

我希望此代码在单击时以编程方式预填充所选项目。

编辑 我要做什么：下拉列表共有 N 多选项目，我单击一行，它传入最初选择的 3 个选项，我如何像 3.5.2 那样执行 initSelection？这样想：我正在使用多选下拉菜单来显示相关的属性，如果它是体育赛事，它可能只附带门票，但一周后我可能想为这个赛事添加停车位，但它需要要记住我已经有与此活动相关的门票

我在 3.5.2 中完成了以下操作：

initSelection : function (element, callback) {

        var id=$(element).val();
        if (id!=="") {
            $.ajax("index.cfm/tickets/select2get", {
                dataType: 'json',
                data: {
                    nd_event_id: $('#nd_event_id').val(),
                    passes: 'TK,PK,ATH',
                },
            }).done(function(data) { callback(data); });
        }
    },   

但是由于从输入迁移到选择，这在 4.0.0 中不起作用

Answer 1

如果我们将逻辑/代码分成更小的块，然后将它们捆绑在一起，则更容易理解......如果出现问题，也更容易调试。所以你需要：

以 (key, value) 格式填充的下拉项 Select2 格式为 (id, text)。你说得对，所以让我们 将其放入变量中：

var infoCategory = [
{
    "id": 1,
    "text": "Tickets"
  },
  {
    "id": 2,
    "text": "Parking"
  },
  {
    "id": 3,
    "text": "Special Events"
  },
  {
    "id": 4,
    "text": "Athletics"
  }
];

Select2 需要了解我们刚刚创建的下拉项，它将寻找数据配置以及其他选项。基本上，“数据”是您传递给它的配置选项之一，如果 <select> 元素没有任何 <option> 子元素。因此，让我们为 Select2 配置选项创建另一个变量，如下所示：

var select2Options = {

     "multiple" = false,
     "data" = infoCategory

};

可以在documentation 中找到默认 Select2 选项的完整列表。

创建<select> 元素：

<select id="name="s2select01"></select>

现在，您可以使用配置选项（包括下拉数据）直接初始化 Select2，就像您在示例中所做的那样：

$('#s2select01').select2(select2Options);

或者您可以在点击事件中使用上述脚本的初始化行并将其绑定到另一个元素，如下所示：

$('#someButtonID').click(function () {

    $('#s2select01').select2(select2Options);

});

我创建了一个verbose demonstration on CodePen，这样你就可以看到它们都绑定在一起了。