select2/pages/12.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

All public events are relayed using the jQuery event system, and they are triggered on the <select> element that Select2 is attached to. You can attach to them using the .on method provided by jQuery:

$('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, allowing adapters to communicate with each other. This internal event system is only accessible from plugins and adapters that are connected to Select2 - not through the jQuery event system.

You can find more information on the public events triggered by individual adapters in the advanced chapter.