title: Reset the element to initial html content when select value changes
body: <p>I'm trying to create a form when the user chooses "United States" or "Canada" from the country dropdown list, a state dropdown list will show up. Otherwise if the user chooses any other country, the state dropdown list will be replaced by a text input.</p>
  
  <p>Here's an example (when the US is selected):</p>
  
  <p><a href="https://i.stack.imgur.com/4iLyi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4iLyi.png" alt="enter image description here"></a></p>
  
  <p>and when other country is selected: </p>
  
  <p><a href="https://i.stack.imgur.com/20mvE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/20mvE.png" alt="enter image description here"></a></p>
  
  <p>I've pretty much got the result I want, but I was just wondering if there's better way to simply return the initial html content instead of writing the same thing all again with jQuery?</p>
  
  <p>here's my jquery:</p>
  
  <pre><code>$('#country').change(function () {
      setRegion();
  });
  function setRegion() {
      var country = $('#country').val();
      var us_states = '&lt;select id="us_states"&gt;...&lt;/select&gt;';
      var ca_states = '&lt;select id="ca_states"&gt;...&lt;/select&gt;';
      if (country === 'United States') {
          $('#region_wrapper').html('&lt;label for="us_states"&gt;State&lt;/label&gt;' + us_states);
      } else if (country === 'Canada') {
          $('#region_wrapper').html('&lt;label for="ca_states"&gt;State&lt;/label&gt;' + ca_states);
      } else {
          $('#region_wrapper').html('&lt;label for="region"&gt;Region, state, province, etc. (optional)&lt;/label&gt;' + '&lt;input type="text" id="region" placeholder="Region, state, province, etc. (optional)" /&gt;');
      }
  }
  </code></pre>
  
  <p>and my html:</p>
  
  <pre><code>&lt;li id="country_wrapper"&gt;
      &lt;label for="country"&gt;Country&lt;/label&gt;
      &lt;select id="country"&gt;...&lt;/select&gt;
  &lt;/li&gt;
  &lt;li id="region_wrapper"&gt;
      &lt;label for="region"&gt;Region, state, province, etc. (optional)&lt;/label&gt;
      &lt;input type="text" id="region" placeholder="Region, state, province, etc. (optional)" /&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>In case my question isn't clear enough: I've pretty much got the result I want but I just want to know if there's an easier way to simply return "#region_wrapper" back to its initial html content when any other country is selected.</p>
  
  <p>Thanks in advance!</p>