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

i'm using select2 in combination of dropdown menus. have 1 menu "countries" , 1 "states/provinces". depending on country chosen, "states/provinces" dropdown changes in content. states/provinces pulled ajax database , displayed way:

$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="choose country..."> '; $display_output .= '<option value="" selected>select state</option> ';  while ($state_details = $this->fetch_array($sql_select_states)) {     $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>'; }  $display_output .= '</select>'; 

so far, good. provinces change correctly, when loads, select2 shows "undefined" states dropdown, though have set as

data-placeholder="choose country..." 

i'm assuming because on loading, country selected "united states" , populates list of states none of them default or selected. there other way define default value doesn't show "undefined"?

and (but less important) problem when chooses "united states" example, , chooses "arizona", if person changes "canada" country, state of "arizona" still stays when opening dropdown provinces of canada selectable. there way return default value temporarily when selects country, until province chosen again?

my loading code just:

<script> $(document).ready(function() { $("#state").select2(); }); </script> 

select 3.*

please see update select2 data without rebuilding control may duplicate. way destroy , recreate select2 element.

$("#dropdown").select2("destroy");  $("#dropdown").select2(); 

if having problems resetting state/region on country change try clearing current value

$("#dropdown").select2("val", ""); 

you can view documentation here http://ivaynberg.github.io/select2/ outlines nearly/all features. select2 supports events such change can used update subsequent dropdowns.

$("#dropdown").on("change", function(e) {}); 

select 4.* update

you can update data/list without rebuilding control using:

foobardropdown.select2({     data: fromaccountdata });