select2 changing items dynamically

Question

I have two selects that are linked  Each value of the first select determines which items will be displayed in the second select   The values of the second select are stored in a two-dimension array        id  1  text   a      id  2  text   b              id   1a   text   aa     id   1b   text   ba                   The first select value determines the index to be used to populate the second select  So in a  change  event on the first I should be able to modify the items select-two contains   Reading documentation I think I need to use the  data  option    but not shure how as the example loads the array data on initialization and it seems to don t work if I try to do the same after initialization   HTML  Attribute   lt select name  attribute  id  attribute  gt       lt option value  0  gt Color lt  option gt       lt option value  1  gt Size lt  option gt   lt  select gt   Value   lt select name  value  id  value  gt  lt  select gt    lt script gt     var data        id  1  text   black      id  2  text   blue                            id   1   text   9     id   1   text   10                                 attribute   select2   bind  change   function             Here I need to change   value  items            value   select2  data  data   this  val          This does not work               value   select2     lt  script gt

User · Answer

For v4 this is a known issue that won t be addressed in 4 0 but there is a workaround  Check https   github com select2 select2 issues 2830

User · Answer

Try using the trigger property for this      select   select2   trigger  change

User · Answer

In my project I use following code       attribute   select2        attribute   bind  change   function        var  options            for  var i in data             options    options add                  lt option gt    attr  value   data i  id  html data i  text                           value   html  options  trigger  change          Try to comment out the select2 part  The rest of the code will still work

User · Answer

I fix the lack of example s library here     lt link href  https   cdnjs cloudflare com ajax libs select2 3 5 2 select2 css  rel  stylesheet   gt   lt script src  https   cdnjs cloudflare com ajax libs select2 3 5 2 select2 js  gt    http   jsfiddle net bbAU9 328

User · Answer

I ve made an example for you showing how this could be done   Notice the js but also that I changed  value into an input element   lt input id  value  type  hidden  style  width 300px   gt    and that I am triggering the change event for getting the initial values      attribute   select2   on  change   function             value   select2  data data   this  val          trigger  change      Code Example  Edit   In the current version of select2 the class attribute is being transferred from the hidden input into the root element created by select2  even the select2-offscreen class which positions the element way outside the page limits   To fix this problem all that s needed is to add removeClass  select2-offscreen   before applying select2 a second time on the same element       attribute   select2   on  change   function             value   removeClass  select2-offscreen   select2  data data   this  val          trigger  change      I ve added a new Code Example to address this issue

User · Answer

I m successfully using the following to update options dynamically    control select2  destroy   empty   select2  data    id  1  text   new text

[javascript] select2 changing items dynamically

Examples related to javascript

Examples related to jquery-select2