select2/pages/10.programmatic-control/02.events/docs.md

title	taxonomy	process	never_cache_twig
Events	category docs	twig true	true

Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.

Event	Description
change	Triggered whenever an option is selected or removed.
select2:closing	Triggered before the dropdown is closed. This event can be prevented.
select2:close	Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:opening	Triggered before the dropdown is opened. This event can be prevented.
select2:open	Triggered whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:selecting	Triggered before a result is selected. This event can be prevented.
select2:select	Triggered whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselecting	Triggered before a selection is removed. This event can be prevented.
select2:unselect	Triggered whenever a selection is removed. select2:unselecting is fired before this and can be prevented.

Listening for events

$('select').on('select2:select', function (e) {
  // Do something
});

Event data

When select2:select is triggered, data from the selection can ba accessed via the params.data property:

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

What events can be prevented? How can I prevent a selection from being made?

Examples

Internal Select2 events

Select2 has an internal event system that works independently of the DOM event system. This internal event system is only accessible from plugins and adapters that are connected to Select2.