select2 onchange event only works once

Question

I have a problem with the jQuery s Select2   When the page loads  if O click on the search result it will select and trigger the event onchange  but only the first time   If I search another time  it won t   Here s my code  it s an Ajax based search    jQuery   search code   select2        width    600px        tokenSeparators                    closeOnSelect   false       placeholder    scan or type a SKU or product or ESN        minimumInputLength   1       ajax              url    lookProduct            dataType    json            type    POST            data   function  term  page                return                   barcode  term                  page limit  3                  page  page                                    results   function  data  page                return                   results  data                                   on  change   function  e        var str       s2id search code  select2-choice span   text         DOSelectAjaxProd this value  str         this value    on  select   function  e        console log  select

User · Answer

As of version 4 0 0  events such as select2-selecting  no longer work  They are renamed as follows         select2-close is now select2 close    select2-open is now select2 open   select2-opening is now select2 opening    select2-selecting is now select2 selecting    select2-removed is now select2 removed   select2-removing is now select2 unselecting      Ref  https   select2 org programmatic-control events   x000D   x000D   function     x000D        select2   select2    x000D     x000D        select2   on  select2 selecting   function e    x000D      console log  Selecting      e params args data   x000D        x000D     jQuery   x000D  body  x000D    font-family  sans-serif  x000D    x000D   x000D   select2  x000D    width  100   x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 3 css select2 min css  rel  stylesheet  gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 3 js select2 full min js  gt  lt  script gt  x000D   x000D   lt select class  select2  multiple  multiple  gt  x000D     lt option value  1  gt Option 1 lt  option gt  x000D     lt option value  2  gt Option 2 lt  option gt  x000D     lt option value  3  gt Option 3 lt  option gt  x000D     lt option value  4  gt Option 4 lt  option gt  x000D     lt option value  5  gt Option 5 lt  option gt  x000D     lt option value  6  gt Option 6 lt  option gt  x000D     lt option value  7  gt Option 7 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

search code   select2              on  change   function  e          var str       s2id search code  select2-choice span   text          DOSelectAjaxProd e val  str

User · Answer

Apparently the change event is not fired if a selection already exists when using data  I ended up updating the data manually on select to resolve the problem        search code   on  select2-selecting   function e            search code   select2  data  e choice         I know this is pretty late but hopefully this answer will save others time

User · Answer

This is what I am using       search code   live  change   function      alert this value        For latest jQuery users  this one should work     document body  on  change    search code  function     alert this value

User · Answer

Set your  on listener to check for specific select2 events  The  change  event is the same as usual but the others are specific to the select2 control thus    change select2-opening select2-open select2-close select2-highlight select2-selecting select2-removed select2-loaded select2-focus   The names are self-explanatory  For example  select2-focus fires when you give focus to the control

User · Answer

My select2 element was not firing the onchange event as the drop down list offered only one value  making it impossible to change the value   The value not having changed  no event was fired and the handler could not execute   I then added another handler to clear the value  with the select2-open handler being executed before the onchange handler   The source code now looks like   el on  select2-open   function e          this  val          el on  change   function                   The first handler clears the value  allowing the second handler to fire up even if selecting the same value

User · Answer

This is due because of the items id being the same  On change fires only if a different item id is detected on select   So you have 2 options  First is to make sure that each items have a unique id when retrieving datas from ajax   Second is to trigger a rand number at formatSelection for the selected item   function getRandomInt min  max        return Math floor Math random      max - min   1     min         formatSelection  function item   item id  getRandomInt 1 200

[jquery] select2 onchange event only works once

Examples related to jquery

Examples related to events

Examples related to onchange

Examples related to jquery-select2