title: How to keep multiple select in sync onChange using jquery
body: <p>I'm trying to figure out how to keep in sync two or more selects. I actually created several select elements (I'm not sure if this is the most accurate approach, if there's another way I'd be grateful if someone tells me). </p>
  
  <p>If I select <code>North America</code> in the first one, only the select with <code>id="north"</code> will show automatically and the others will remain hidden, if I change to <code>Central America</code>, the rest will change as well, showing only the select with <code>id="central"</code> and the rest hidden.</p>
  
  <p>This is what I got so far:</p>
  
  <pre><code>&lt;select id="continent"&gt;
      &lt;option value="1"&gt;North America&lt;/option&gt;
      &lt;option value="2"&gt;Central America&lt;/option&gt;
      &lt;option value="3"&gt;South America&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="north"&gt;
      &lt;option value="1"&gt;Canada&lt;/option&gt;
      &lt;option value="2"&gt;USA&lt;/option&gt;
      &lt;option value="3"&gt;Mexico&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="central"&gt;
      &lt;option value="1"&gt;Guatemala&lt;/option&gt;
      &lt;option value="2"&gt;Costa Rica&lt;/option&gt;
      &lt;option value="3"&gt;Nicaragua&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="south"&gt;
      &lt;option value="1"&gt;Brazil&lt;/option&gt;
      &lt;option value="2"&gt;Argentina&lt;/option&gt;
      &lt;option value="3"&gt;Chile&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So far I've only got to sync two selects with same value:</p>
  
  <pre><code>$("#continent").change(function(){
      $("#north").val($("#continent").val())
  });
  </code></pre>
  
  <p>However, this is far from what I need. Could anyone help me figure out the correct approach?</p>
  
  <p>Thanks in advance! </p>