Adding “data-” attributes with select2

Question

I've seen a lot examples of Select2 option tags set with "data-" attributes and I would like to do it.

I'm using ajax to get the data. I get the ID and the TEXT needed to build the select.

But how can I add more attributes to it?

I just didn't find the way to add them.

$(element).select2({
    placeholder: 'Select one...',
    width: '100%',
    minimumInputLength: 2,
    ajax: {
        url: '/my/url',
        dataType: 'json',
        data: function(params) {
            return {
                q: params.term,
                page: params.page
            };
         },
         processResults: function(data, page) {
             console.log(data);
             return {
                 results: data
             };
         },
         cache: true
     }
 });

Answer 1

This solution applies to Select2 versions 4.0 or higher.

Assuming the attributes your talking about are loaded in the array your returning in processResults. For example, if you are selecting a record like ('id':1,'text':'some-text','custom_attribute':'hello world')

Then on a change event you can do:

data=$("#selector").select2('data')[0];
console.log(data.custom_attribute);//displays hello world

Hope it helps..

Answer 2

I am not sure what exactly you are asking but if you want to add data attribute you can do like this..

In Jquery:

$(element).attr('data-info', '222');

In javascript:

document.getElementById('elementId').setAttribute('data',"value: 'someValue'");