Add custom attribute from source select to select2 options

How Do I...
#1

I have a select built by ajax which adds custom html for option help text, e.g.,
<option value="foo" data-content="foo<span class='dr-hint' data-toggle='tooltip' data-placement='bottom' title='ex: Some helpful text'>&nbsp; <i class='fas fa-question-circle'></i></span>">foo</option>

Obviously, when I make a select2 from this content it drops the data-content. How can I get that attribute into the option list of select2?

#2

Never mind. Posting what I figured out between the site docs and stackoverflow. :slight_smile:
This is for a source select with options that have a custom attr called data-content.

function formatOptions (data) {
    var $formattedOption = data.text;
    if ( $(data.element).data('content') ){
        $formattedOption = $("<span>" + $(data.element).data('content') + "</span>");
    }
    return $formattedOption;
}

$(".my-select").select2({templateSelection: formatOptions});
#3

You either need to use Select2’s built-in Ajax capability, or use your own Ajax call to pull the data into a JavaScript array of the correct format. Either of these approaches will allow you to set the data-content values (directly from your dataset) as the text of the items in the Select2 droodown.