%PDF-1.7 GIF89;
Server IP : 5.161.254.237 / Your IP : 216.73.216.49 Web Server : Apache System : Linux diamond.sialwebvps.com 4.18.0-553.8.1.el8_10.x86_64 #1 SMP Tue Jul 2 07:26:33 EDT 2024 x86_64 User : stellasp ( 1131) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/stellasp/public_html/backend/vendors/select2/docs/_includes/options/events/ |
Upload File : |
<section> <h2 id="events-public"> Public jQuery events </h2> <h3> What events will Select2 trigger? </h3> <p> Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions. </p> <dl class="s2-docs-panels"> <dt>change</dt> <dd>Triggered whenever an option is selected or removed.</dd> <dt>select2:close</dt> <dd>Triggered whenever the dropdown is closed.</dd> <dt>select2:closing</dt> <dd>Triggered before the dropdown is closed. This event can be prevented.</dd> <dt>select2:open</dt> <dd>Triggered whenever the dropdown is opened.</dd> <dt>select2:opening</dt> <dd>Triggered before the dropdown is opened. This event can be prevented.</dd> <dt>select2:select</dt> <dd>Triggered whenever a result is selected.</dd> <dt>select2:selecting</dt> <dd>Triggered before a result is selected. This event can be prevented.</dd> <dt>select2:unselect</dt> <dd>Triggered whenever a selection is removed.</dd> <dt>select2:unselecting</dt> <dd>Triggered before a selection is removed. This event can be prevented.</dd> </dl> <h3> Does Select2 include extra information in these events? </h3> {% include options/not-written.html %} <h3> How can I attach listeners for these events? </h3> {% highlight js linenos %} $('select').on('select2:select', function (evt) { // Do something }); {% endhighlight %} {% include options/not-written.html %} <h3> What events does Select2 listen for? </h3> <p> Select2 will listen for the <code>change</code> event on the <code><select></code> that it is attached to. If you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event. </p> {% highlight js linenos %} $('select').val('US'); // Select the option with a value of 'US' $('select').trigger('change'); // Notify any JS components that the value changed {% endhighlight %} <h3> Can I trigger an event other than <code>change</code> to notify Select2 of changes? </h3> <p> It's common for other components to be listening to the <code>change</code> event, or for custom event handlers to be attached that may have side effects. Select2 does not have a custom event (like <code>select2:update</code>) that can be triggered other than <code>change</code>. You can rely on jQuery's event namespacing to limit the scope to Select2 though by triggering the <code>change.select2</code> event. </p> {% highlight js linenos %} $('select').val('US'); // Change the value or make some change to the internal state $('select').trigger('change.select2'); // Notify only Select2 of changes {% endhighlight %} <h3> What events can be prevented? How can I prevent a selection from being made? </h3> {% include options/not-written.html %} </section>