Как сохранить множественный выбор в синхронизации onChange с помощью jquery

Question

Я пытаюсь выяснить, как синхронизировать два или более выбора. Я на самом деле создал несколько элементов выбора (я не уверен, что это самый точный подход, если есть еще один способ, я был бы признателен, если кто-то скажет мне).

Если я выбираю North America в первом, только выбрать с id="north" покажет автоматически, а остальные останутся скрытыми, если я изменяю Central America, остальное будет меняться, как хорошо, показывая только выбрать с id="central" и остальными скрытый.

Это то, что я до сих пор:

<select id="continent"> 
    <option value="1">North America</option> 
    <option value="2">Central America</option> 
    <option value="3">South America</option> 
</select> 

<select id="north"> 
    <option value="1">Canada</option> 
    <option value="2">USA</option> 
    <option value="3">Mexico</option> 
</select> 

<select id="central"> 
    <option value="1">Guatemala</option> 
    <option value="2">Costa Rica</option> 
    <option value="3">Nicaragua</option> 
</select> 

<select id="south"> 
    <option value="1">Brazil</option> 
    <option value="2">Argentina</option> 
    <option value="3">Chile</option> 
</select> 

До сих пор я получил только синхронизировать два выбирает с тем же значением:

$("#continent").change(function(){ 
    $("#north").val($("#continent").val()) 
}); 

Однако, это далеко от того, что мне нужно , Может ли кто-нибудь помочь мне разобраться в правильном подходе?

Заранее благодарен!