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?

Roasting

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

Roasting

This is what I was hoping to avoid - populating the list myself, from my JS code. I wanted to ask select2 to perform the AJAX load that it would when clicked on, then select one of the newly loaded results in my JS code. Looks like that's not possible? – Trident

The first part what you would require, is PERHAPS possible(I have to look into it), but the selecting part is only achiavable by the above mentioned solution(at least with the 4.0 version). Perhaps the guys who made this awesome plugin will include a programmatic solution in the later versions, let's hope for it:) In the meantime, I will check if populating the search box via javascript, without a click is possible somehow, or not, I will get back with my findings as soon as I can – Roasting

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.

Trident

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

Trilobite

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.

Trustless