Attach click-event to element in .select2-result

Question

I\'m looking for a way to attach a click-event to a select2-result-item. I\'ve gone ahead and formatted both result and selection via

function format(state)          


        

Answer 1

Simple onchange event like this also would help to solve the problem

<select id="GetClientAccounts" class="default-select2 form-control col-md-4" onchange="GetClientAccounts();">
    <option disabled selected value="-1">Select a customer from here</option>
    @{
        if (ViewBag.customers != null)
        {
            foreach (CustomerTBL customer in ((List<CustomerTBL>)ViewBag.customers).OrderBy(c => c.cusCustomerName))
            {
                <option value="@customer.cusCustomerID">@customer.cusCustomerName</option>
            }
        }
    }
</select>

Answer 2

the thing seems to be that the tgas will be deleted right after the box is closed. Therefore the click event cannot be fired.

I've changed a few things + the event that will be listened on. It's now a mousedown...

function format(state) {
    if (!state.id) return state.text; // optgroup
    return state.text + " <a class='info'>link</a>";
}

$("select").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
}).on('select2-open',function(){
    console.log($('.info'))
    $('.info').on('mousedown', function(event){
        console.log("click")
        $('#log').text( "clicked" );
        event.preventDefault();
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select>
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

<div id="log"></div>

Answer 3

None of the answers above worked for me for select2 4.0.0, so here's what I ended up doing:

$(document).on('mouseup', '.select2-container--open .select2-results__option', function (e) {
    // Act on the element
}

Specifically, I wanted to only act on the previously-selected item:

$(document).on('mouseup', '.select2-container--open .select2-results__option[aria-selected=true]', function (e) {
    // Do something on the previously-selected item
}

Answer 4

A simpler approach according to docs.

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

Surprised not to see any answer for this.

Answer 5

I think Select2's handling of the mouseup event prevents the .info element from getting a click event. Having the .info element capture the mouseup event and prevent it from propagating seems to fix that.

function format(state, container) {
    if (!state.id) return state.text; // optgroup
    container.append(state.text);
    $('<i class="info">link</i>')
        .appendTo(container)
        .mouseup(function(e) {
            e.stopPropagation();            
        })
        .click(function(e) {
            e.preventDefault();
            alert('CLICK');
        });
}

This can also be done to support a link in the selected item, but there it is the mousedown event that needs to be captured.

jsfiddle

Answer 6

Just ran into this problem with select2 v4.0.3 and ended up using the 'select2:selecting' event. Here's essentially how I did it:

var $select2 = $savedReportsList.select2({ [stuff] });

$select2.on('select2:selecting', function(e) {
  var args = e.params.args;
  if ($(args.originalEvent.target).hasClass('[something]')) {
    if (confirm('Are you sure?')) {
       window.location = '[somewhere]' + '/' + args.data.id;
    }
    return false; // stops propogation (so select2:select never fires)
  });
});