Главная / JavaScript / Плагины / Select 2 / События

События

Плагин Select2 поддерживает ряд событий, которые можно как отловить, так и вызвать с помощью кода.

Список событий Select2

Событие	Описание
`change`	Срабатывает всякий раз, когда значение выбрано или удалено.
`change.select2`	Урезанная версия события `change`. Срабатывает только для Select2.
`select2:closing`	Срабатывает до закрытия выпадающего списка. Это событие можно предотвратить.
`select2:close`	Срабатывает всякий раз, когда выпадающий список закрывается. Не может быть предотвращено.
`select2:opening`	Срабатывает до открытия выпадающего списка. Это событие можно предотвратить.
`select2:open`	Срабатывает всякий раз, когда выпадающий список открывается. Не может быть предотвращено.
`select2:selecting`	Срабатывает до того, как будет выбрано значение из списка. Это событие можно предотвратить.
`select2:select`	Срабатывает всякий раз, когда выбирается значение из списка. Не может быть предотвращено.
`select2:unselecting`	Срабатывает перед удалением выбранного значения. Это событие можно предотвратить.
`select2:unselect`	Срабатывает всякий раз, когда выбранное значение удаляется. Не может быть предотвращено.
`select2:clearing`	Срабатывает до того, как все выбранные значения будут очищены. Это событие можно предотвратить.
`select2:clear`	Срабатывает всякий раз, когда все выбранные значения очищаются. Не может быть предотвращено.

Прослушивание событий

Скопировано

$( 'select' ).on( 'select2:select', function(e) {

	// что-то делаем

});

Показать код

Инициация событий

Можно вручную запускать события в элементе управления Select2 с помощью jQuery-метода trigger:

Скопировано

$( 'select' ).trigger( 'select2:select' );

Показать код

Если же надо передать некие данные в какой-то обработчик события, то надо создать новый объект события jQuery и запустить его:

Скопировано

$( 'select' ).trigger({

	type: 'select2:select',

	params: {

		data: data

	}

});

Показать код

Как получить переданные данные в обработчике события смотрим здесь.

Демонстрация возникновения событий в элементе управления Select2

htmlРезультат

Скопировано

<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>

<style>
	#log {
		margin: 0 0 10px;
		padding: 0 0 0 35px;
		height: 150px;
		overflow-y: scroll;
		border: 1px solid;
	}
	.select2 {
		margin: 0 0 100px;
	}
	h4 {
		margin: 0 0 7px;
	}
</style>

<select multiple='multiple'>
	<option></option>
	<option value='1'>Первое значение</option>
	<option value='2'>Второе значение</option>
	<option value='3'>Третье значение</option>
</select>
<h4>Лог событий:</h4>
<ol id='log'></ol>
<button>Очистить лог</button>

<script>
	jQuery(document).ready(function( $ ) {
		$( 'select' ).select2({
			placeholder: 'Выберите значение',
			allowClear: true,
			width: '100%',
			minimumResultsForSearch: Infinity
		});
		$( 'select' ).on( 'change', function() { log( 'change' ); });
		$( 'select' ).on( 'change.select2', function() { log( 'change.select2' ); });
		$( 'select' ).on( 'select2:closing', function() { log( 'select2:closing' ); });
		$( 'select' ).on( 'select2:close', function() { log( 'select2:close' ); });
		$( 'select' ).on( 'select2:opening', function() { log( 'select2:opening' ); });
		$( 'select' ).on( 'select2:open', function() { log( 'select2:open' ); });
		$( 'select' ).on( 'select2:selecting', function() { log( 'select2:selecting' ); });
		$( 'select' ).on( 'select2:select', function() { log( 'select2:select' ); });
		$( 'select' ).on( 'select2:unselecting', function() { log( 'select2:unselecting' ); });
		$( 'select' ).on( 'select2:unselect', function() { log( 'select2:unselect' ); });
		$( 'select' ).on( 'select2:clearing', function() { log( 'select2:clearing' ); });
		$( 'select' ).on( 'select2:clear', function() { log( 'select2:clear' ); });
		
		$( 'button' ).on( 'click', function() {
			$( '#log' ).empty();
		});
		function log( text ) {
			$( '#log' ).append( '<li>' + text + '</li>' ).scrollTop(99999999);
		}
	});
</script>

Показать код