javascript - 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 ？这样想:我正在使用多选下拉菜单来显示关联的属性，如果它是体育赛事，它可能只附带门票，但一周后我可能想为此事件添加 parking 位，但它需要请记住我已经拥有与此事件相关的门票

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

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

以(键，值)的格式填充的下拉项 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

};

A full list of the default Select2 options can be found in their documentation.

创建<select>元素:

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

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

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

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

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

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

});

我创建了一个 verbose demonstration on CodePen所以你可以看到它们全部联系在一起。