how to refresh Select2 dropdown menu after ajax loading different content

Question

I m using Select2 in a combination of dropdown menus  I have one menu for  Countries  and one for  States Provinces   Depending on the country that is chosen  the  States Provinces  dropdown changes in content  The states provinces are pulled with ajax from a database and then displayed this way    display output     lt select style  width 350px   tabindex  2  name  state  id  state  data-placeholder  Choose a Country     gt      display output      lt option value    selected gt Select a State lt  option gt      while   state details    this- gt fetch array  sql select states          display output      lt option value       state details  id               selected value     state details  id       selected           gt      state details  s name       lt  option gt        display output      lt  select gt      So far  so good  All the provinces change correctly  however when it initially loads  the Select2 shows  undefined  for the states dropdown  even though I have it set as  data-placeholder  Choose a Country       I m assuming it could be because on loading  the country selected is  United States  and it populates a list of states but none of them is default or selected  Is there any other way to define a default value so that it doesn t show  Undefined    And another  but less important  problem is that when someone chooses  United States  for example  and then chooses  Arizona   if the person then changes to  Canada  as the country  the state of  Arizona  still stays but when opening the dropdown the provinces of Canada are selectable  Is there any way to return it to the default value temporarily when someone selects another country  until a province is chosen again   My loading code is currently just    lt script gt    document  ready function         state   select2         lt  script gt

User · Answer

Finally solved issue of reinitialization of select2 after ajax call.

You can call this in success function of ajax.

Note : Don't forget to replace ".selector" to your class of <select class="selector"> element.

jQuery('.select2-container').remove();

jQuery('.selector').select2({
   placeholder: "Placeholder text",
   allowClear: true
});

jQuery('.select2-container').css('width','100%');

User · Answer

select2 has the placeholder parameter  Use that one      state   select2      placeholder   Choose a Country

User · Answer

It s common for other components to be listening to the change event  or for custom event handlers to be attached that may have side effects  Select2 does not have a custom event  like select2 update  that can be triggered other than change  You can rely on jQuery s event namespacing to limit the scope to Select2 though by triggering the  change select2 event       state   trigger  change select2       Notify only Select2 of changes

User · Answer

Select 3    Please see Update select2 data without rebuilding the control as this may be a duplicate  Another way is to destroy and then recreate the select2 element       dropdown   select2  destroy         dropdown   select2      If you are having problems with resetting the state region on country change try clearing the current value with       dropdown   select2  val          You can view the documentation here http   ivaynberg github io select2  that outlines nearly all features  Select2 supports events such as change that can be used to update the subsequent dropdowns       dropdown   on  change   function e         Select 4   Update  You can now update the data list without rebuilding the control using   fooBarDropdown select2       data  fromAccountData

User · Answer

Use the following script after appending your select       state   select2      Don t use destroy

User · Answer

Initialize again select2 by new id or class like below  when the page load       mynames   select2      call again when came by ajax after success ajax function       names   select2

User · Answer

Got the same problem in 11 11 19  so sorry for possible necroposting  The only what helped was next solution   var drop       product 1         get our element    must be unique    var settings   drop attr  data-krajee-select2     pick krajee attrs of our elem  var drop id   drop attr  id        take id  settings   window settings       take previous settings from window  drop select2 settings       initialize select2 element with it      kv-plugin-loading   remove       remove loading animation    It s  maybe  not so good  nice and precise solution  and maybe I still did not clearly understood  how it works and why  but this was the only  what keeps my select2 dropdowns  gotten by ajax  alive   Hope  this solution will be usefull or may push you in right decision in problem fixing

[php] how to refresh Select2 dropdown menu after ajax loading different content?

Examples related to php

Examples related to jquery

Examples related to ajax