Прикрепите событие клика к элементу в .select2-result

Поскольку библиотека Select2 предотвращает любые события щелчка в всплывающем списке, вы не можете напрямую привязывать события к .info. Но вы можете переопределить метод onSelect и поместить туда любой код, какой захотите.

См. пример: http://jsfiddle.net/f8q2by55/

Обновление для множественного выбора: http://jsfiddle.net/6jaodjzq/

Это похоже на концепцию netme, но событие select2 неверно (возможно, разница в версии), и вам нужно использовать stopPropagation, чтобы предотвратить выбор элемента:

http://jsfiddle.net/ZhfMg/

$('#mySelect2').on('select2-open', function() { 
    $('.select2-results .info').on('mouseup', function(e) { 
        e.stopPropagation();
        console.log('clicked');
    }); 
});

Если используется с x-editable. Это происходит, когда x-editable переходит в режим редактирования (показано событие), когда существует select2, и вы можете подключиться к его функции открытия.

$('#myXEditable').on('shown', function () {
    $(this).data('editable').input.$input.on('select2-open', function() { 
        $('.select2-results .info').on('mouseup', function(e) { 
            e.stopPropagation();
            console.log('clicked');
        }); 
    });
});

Для версий Select2 до 4.0.0 (то есть 3.5.x и ниже) вы должны обратиться к этот ответ о привязке к onSelect.

В новых версиях Select2 события больше не уничтожаются в результатах, поэтому вы можете просто привязываться к событиям mouseup/mousedown, как обычно. Вам следует избегать привязки к событию click, потому что по умолчанию браузеры его не вызывают.

$(".select2").select2({
  templateResult: function (data) {
    if (data.id == null) {
      return data.text;
    }
    
    var $option = $("<spam></span>");
    var $preview = $("<a target='_blank'> (preview)</a>");
    $preview.prop("href", data.id);
    $preview.on('mouseup', function (evt) {
      // Select2 will remove the dropdown on `mouseup`, which will prevent any `click` events from being triggered
      // So we need to block the propagation of the `mouseup` event
      evt.stopPropagation();
    });
    
    $preview.on('click', function (evt) {
      console.log('the link was clicked');
    });
    
    $option.text(data.text);
    $option.append($preview);
    
    return $option;
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2" style="width: 200px;">
  <option value="https://google.com">Google</option>
  <option value="https://mail.google.com">GMail</option>
</select>

В этом примере мы останавливаем распространение события mouseup, поэтому браузер инициирует событие click. Если вы не работаете с реальными ссылками, а вместо этого вам нужно просто поймать событие click, вы должны просто подключиться к событию mouseup.

использовать триггер события select2select по умолчанию вместо использования других событий jquery

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

для получения более подробной информации см. ссылку ниже https://select2.org/programmatic-control/events

Ни один из приведенных выше ответов не работал у меня для select2 4.0.0, так что вот что я в итоге сделал:

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

В частности, я хотел воздействовать только на ранее выбранный элемент:

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

Более простой подход в соответствии с документами.

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

Удивлен, что не увидел ответа на этот вопрос.

Просто добавьте прослушиватель «open» и настройте другой прослушиватель «mouseup» для тега «»:

$("#select").on('open', function() { 
    $('.select2-results i').on('mouseup', function() { 
       alert('aaa');
    }); 
});

Вот ссылка на мое решение: http://jsfiddle.net/EW8t7/

Я думаю, что обработка Select2 события mouseup не позволяет элементу .info получать событие click. Наличие элемента .info, фиксирующего событие mouseup и предотвращающего его распространение, похоже, исправляет это.

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');
        });
}

Это также можно сделать для поддержки ссылки в выбранном элементе, но здесь необходимо захватить событие mousedown.

jsfiddle

Вам нужно отвязать событие mouseup от элемента .select2-results__options. Я делаю это в своей функции templateResult:

function templateResult(location) {

    var $location = $([html with links]);

    $('.select2-results__options').unbind('mouseup');

    return $location;
}

Если вы хотите сохранить поведение select2 по умолчанию при выборе параметра и закрытии раскрывающегося списка, вам нужно будет вручную инициировать эти события:

$('.select2-results__options').unbind('mouseup');

$('a', $location).on('click', function (e) {
    $('#locations_dropdown').select2('val', location.id);
    $('#locations_dropdown').select2('close');
});

return $location;

дело похоже в том, что tgas будет удаляться сразу после закрытия ящика. Поэтому событие click не может быть запущено.

Я изменил несколько вещей + событие, которое будет прослушиваться. Теперь это мышка...

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>

Просто столкнулся с этой проблемой с select2 v4.0.3 и в итоге использовал событие select2:selecting. Вот, по сути, как я это сделал:

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)
  });
});

Простое событие onchange, подобное этому, также поможет решить проблему.

<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>