Trigger an action after selection select2

Question

I am using select2 library for my search  is there any way to trigger an action after selecting a search result  e g  open a popup  or a simple js alert         e6   select2       placeholder   Enter an item id please       minimumInputLength  1      ajax       instead of writing the function to execute the request we use Select2 s convenient helper         url   index php r sia searchresults           dataType   jsonp           quietMillis  3000          data  function  term  page            return               q  term     search term             page limit  10              id  10                                   results  function  data  page       parse the results into the format expected by Select2                 since we are using custom formatting functions we do not need to alter remote JSON data             return  results  data                          formatResult  movieFormatResult     omitted for brevity  see the source of this page     formatSelection  movieFormatSelection     omitted for brevity  see the source of this page     dropdownCssClass   bigdrop      apply css that makes the dropdown taller     escapeMarkup  function  m    return m       we do not want to escape markup since we are displaying html in results

User · Accepted Answer

See the documentation events section

Depending on the version, one of the snippets below should give you the event you want, alternatively just replace "select2-selecting" with "change".

Version 4.0 +

Events are now in format: select2:selecting (instead of select2-selecting)

Thanks to snakey for the notification that this has changed as of 4.0

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

Version Before 4.0

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

Just to clarify, the documentation for select2-selecting reads:

select2-selecting Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject selection by calling event.preventDefault()

whereas change has:

change Fired when selection is changed.

So change may be more appropriate for your needs, depending on whether you want the selection to complete and then do your event, or potentially block the change.

User · Answer

This worked for me  Select2 4 0 4     document  on  change    select your id   function e           your code     console log  this value   this value

User · Answer

when a Department selecting     department id   on  select2-selecting   function  e        console log  quot Action Before Selected quot        var deptid e choice id      var depttext e choice text      console log  quot Department ID  quot  deptid       console log  quot Department Text  quot  depttext          when a Department removing     department id   on  select2-removing   function  e        console log  quot Action Before Deleted quot        var deptid e choice id      var depttext e choice text      console log  quot Department ID  quot  deptid       console log  quot Department Text  quot  depttext

User · Answer

For above v4      yourselect   on  select2 select   function e             after selection of select2

User · Answer

It works for me       yourselect   on  change   function e           what you would like to happen

User · Answer

There was made some changes to the select2 events names  I think on v  4 and later  so the  -  is changed into this      See the next examples       select   on  select2 select   function e           Do stuff       You can check all the events at the  select2  plugin site  select2 Events

User · Answer

As per my usage above v 4 this gonna work      selectID   on  select2 select   function e           var value   e params data   Using  id text format        And for less then v 4 this gonna work       selectID   on  change   function e          var value   e params data  Using  id text  format

[jquery] Trigger an action after selection select2

Examples related to jquery

Examples related to search

Examples related to jquery-select2