Select2 4.0.0 multi-value select boxes - initial selection

Question

I am attempting to have Select2 (4.0.0rc1) multi-value select box have preloaded data, but it is not working.

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});
  });

I want this code to programmatically prepopulate the selected items on click.

EDIT what I'm after: The drop down has a total of N Multi- selectable items , i click on a row , and it passes in 3 options as initially selected, how do i do an initSelection as 3.5.2 did? Think of it this way: I am using the multi select drop down to show attributes associated, if its a sporting event, It may only come with tickets, but a week from now i may want to add parking for this event, but it needs to remember I already had tickets associated with this event

I accomplished this in 3.5.2 doing the following:

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); });
        }
    },

But this will not work in 4.0.0 due to migration from inputs to selects

Doug Hill Doug Hill · Accepted Answer · 2015-03-07T04:10:17

Easier to understand if we separate the logic/code into smaller chunks and then tie them together... easier to debug as well if things go wrong. So you'll need:

Drop-down items to populate in the format of (key, value) which the Select2 format is (id, text). You've got that correct, so let's put that into a variable:

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

Select2 needs to know about the dropdown items we just created and it will be looking for a configuration of data as well as other options. Basically, "data" is one of the configuration options you pass along to it, if the <select> element doesn't have any <option> child elements. So let's create another variable for the Select2 configuration options as such:

var select2Options = {

     "multiple" = false,
     "data" = infoCategory

};

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

Create the <select> element:

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

Now, either you can directly initialize Select2 with configuration options (which includes drop-down data), like you did in your example, as such:

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

Or you can use the above initialization line of script in a click event and tie it to another element, like so:

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

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

});

I've created a verbose demonstration on CodePen so you can see it all tied together.

Select2 4.0.0 multi-value select boxes - initial selection

1 Answers