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 you are 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'");