Select2 undefined issue

Question

The following function gets json data from URL and populates a select element with jQuery. I am than using Select2 to transform that drop down in a field with autocomplete function.

Everything works fine apart from the writing 'undefined' that I get as soon as the select elements get displayed. The autocomplete and drop down work perfectly. I have tried to use the data placeholder even by adding an empty 'option' element but no success.

function CitiesList(callback){
 $.getJSON(document.URL+'getCities/sdfsfs', function(data){
    var html = '';
    var len = data.length;
    var option = '<option></option>';
    for (var i = 0; i< len; i++) {
        html += '<option value="' + data[i] + '">' + data[i] + '</option>';
    }
    $('.select_cities select').append(option);
    $('.select_cities select').append(html);
    if(callback && typeof callback == 'function'){
        callback.call(null);
    }

});
}

            <select data-placeholder="Select a city" name="cities" id="cities">
            </select>

'select_cities' is the div wrapper around the select element.

Adjoining

Answer 1

This is working now in 4.0. The message sent to the results formatter can be configured either in the object (see their GitHub example repo.text) or hard coded within the function that is called from the templateResult property. e.g.:

templateResult: formatResult,

//...

function formatResult (result) {

if (result.loading) return "Searching...";

Configuration wasn't the easiest thing to find since looking for the string "Searching..." within their their GitHub example had zero hits, but in retrospect is quite intuitive.

Moshemoshell

I think select2 must get more clear docs as it is already so popular. This is exactly what I was facing few days ago. – Oblation

Answer 2

I ran into this recently. It looks like newer versions of Select2 have trouble when a default option is set without a corresponding value or when value is an empty string, for example:

<option value="" selected="selected">Select something</option>

Either explicitly define a non empty value such as value="0" or set placeholderOption: 'first' to force Select2 to use the first option as a default:

$('#select2-field').select2({
    placeholderOption: 'first'
});

Localism

Great answer! Get to it after almost 1hr googling! – Cowles

Answer 3

This issue has been addressed in the latest (3.4.2) version of select2. Upgrade and you should be good to go!

Impeachable

I confirm - 3.4.1 has this issue, but in 3.4.2 it is fixed – Fronnia

again have this issue in 3.4.5 – Cowles

this issue exists in 4.0.2-rc.1 – Shaunna

Answer 4

I've investigated this bug and found that the call to formatSelection can have its data parameter be an array or a data object.

To fix this issue edit the formatSelection function in select2.js file as follows:

formatSelection: function (data, container, escapeMarkup) {
        var dataElement = data ? (data[0] || data) : null;
        return dataElement ? escapeMarkup(dataElement.text) : undefined;            
}

This should fix this nasty bug and get you back on the right track

International

I know this is years old but.... My hands are tied on using 3.5 and this bug crept up for some unknown reason. Your answer got my on the right track. All I had to do was return "data.TEXT" and ignored the rest of the conditions. Why this was needed when my dozens of others work fine without defining formatSelection I have no idea. – Somnifacient

Answer 5

Add the following line in your script this should be work.

<script>
    $(document).ready(function() { $("select").select2(); });
</script>

Bellay

CitiesList() gets already called inside $(document).ready(function(){}), I will give it a go.. – Adjoining

can you tell me what is in data as an example? i think data[i] is not contain the actual value. that is why gives undefined – Bellay

Ok I have managed to find a solution by adding a callback function – Adjoining