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

如果將邏輯/代碼分成較小的塊，然后將它們綁在一起，則更容易理解...如果出錯，也更容易調試。 因此，您需要：

以（鍵，值）格式填充的下拉項，其中Select2格式為（id，文本）。 您已經正確了，所以我們將其放入變量中：

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

Select2需要了解我們剛剛創建的下拉項，它將尋找數據配置以及其他選項。 基本上，如果<select>元素沒有任何<option>子元素，則“ data”是您傳遞給它的配置選項之一。 因此，讓我們為Select2配置選項創建另一個變量，如下所示：

var select2Options = {

     "multiple" = false,
     "data" = infoCategory

};

默認Select2選項的完整列表可以在其文檔中找到。

創建<select>元素：

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

現在，您可以使用示例中的配置選項（包括下拉數據）直接初始化Select2，如下所示：

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

或者，您可以在click事件中使用上述腳本的初始化行，並將其綁定到另一個元素，如下所示：

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

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

});

我已經在CodePen上創建了一個詳細的演示，因此您可以看到它們全部捆綁在一起。