Programmatic selection of select2 which retrieves its data via Ajax

Question

I am using select2 version 4.0, and I am trying to make a programmatic selection to a select box which gets its data from an ajax call.

In the documentation, I found how to set a value programmatically to a regular select2, but I can't figure out how to do this with an ajax select.

If I remember correctly, in the old version, you could set the current value by passing a data to the select2 with this command:

jQuery("selectbox").select2("data", data)

I've tried this, and sent a data object with, id, text and result, but nothing visible happens, and when I query the status of the select box, to see the selected values, it returns null.

Was this option removed, or simply changed? Where can I find this in the documentation, or how could I achieve the desired behaviour?

Answer 1

The only way to achieve this, is to first add an <option> to the select dom with the data you would like to select, and right afterwards, select it like you would do with a regular select box. This was the official answer from kevin-brown also, on their github project page.

https://github.com/select2/select2/issues/3273

So, basicaly, if you know what would you like to select, you can easily create an <option> element from it, add it to the original select box, and then select it by it's value:

var option=jQuery("<option>").attr("value","your_id_here").html("your_text_here");
jQuery("selectbox").append(option);
jQuery("selectbox").val("your_id_here").trigger("change");

Answer 2

I would also love to know a full answer to this, but here's a partial solution:

$('#select2-control-id').val('item-id').trigger('select2:select').trigger('change');

This only seems to work if the select2 has already loaded the item you're asking for - i.e. it's one you've already clicked on.

Not only do you have to have manually opened the dropdown so it will load the first page of items via AJAX - you also have to have actually clicked on the one you want to programmatically select later.

This appears to be because it only adds <options> to the underlying select element when you actually click on them.

I can't see a way to programmatically tell select2 to load the first page of AJAX results.

Answer 3

It's easy to manipulate the hidden <select/> box as:

//set first option as selected 
$("select [value='0']").attr("selected","selected");
$("select").trigger("change");

Demo

Answer 4

You can try this.

    var dataString = 'id='+$value;
    var promise = sendAjaxFunction('load_form.php?k=1',dataString);
    $("#LoadMachine").html("<img src='images/ajax-loader.gif' />");
    promise.success(function (data) {
        $("#LoadMachine").html(data);
        $("#MachineName").select2({
            placeholder: 'Select Operation Name ...',
            allowClear: true
        });
        return false;
    });

Load the data in a Div #LoadMachine and in result you can load select2.