title: how to refresh Select2 dropdown menu after ajax loading different content?
body: <p>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:</p>
  
  <pre><code>$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;';
  </code></pre>
  
  <p>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</p>
  
  <pre><code>data-placeholder="Choose a Country..."
  </code></pre>
  
  <p>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"?</p>
  
  <p>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?</p>
  
  <p>My loading code is currently just:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() { $("#state").select2(); });
  &lt;/script&gt;
  </code></pre>