隐藏在更改下拉菜单上

我正在尝试让一个网站来处理电话号码，并确保它们通过国家/地区代码和区号进行验证(通过根据先前决定更改的下拉菜单进行选择(。到目前为止，我所拥有的是：

<script type="text/javascript">
    $("#countryBox").change(function(){
     var selectedVal = $(this).val();
    if(selectedVal == "Canada")
    {
     $("#regionBox.usa,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.can").show();
    }
    else if(selectedVal == "United States")
    {
     $("#regionBox.can,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.usa").show();
    }
    else if(selectedVal == "United Kingdom")
    {
     $("#regionBox.usa,#regionBox.au,#regionBox.can").hide();
     $("#regionBox.uk").show();
    } else {
     $("#regionBox.usa,#regionBox.uk,#regionBox.can").hide();
     $("#regionBox.au").show();
    }
  });  
</script>

和

<form id="registration" action="post">
<label for="username">Username: <input type="textbox" id="username"/></label>
<br />
<label for="password">Password: <input type="textbox" id="password"/></label>
<br />
<label>Country: </label>
    <select id="countryBox">
        <option selected="selected" value="">Select Country</option>
        <option value="Canada">Canada</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Australia">Australia</option>
    </select>
<br />
<label>Region: </label>
    <select id="regionBox">
        <option selected="selected" value="">Select Region</option>
        <!-- canadian -->
        <option class="can" value="BC">British Columbia</option>
        <option class="can" value="AB">Alberta</option>
        <option class="can" value="SK">Saskatchewan</option>
        <option class="can" value="MB">Manitoba</option>
        <option class="can" value="QC">Quebec</option>
        <option class="can" value="ON">Ontario</option>
        <option class="can" value="NF">Newfoundland</option>
        <option class="can" value="NB">New Brunswick</option>
        <option class="can" value="NS">Nova Scotia</option>
        <option class="can" value="PEI">Prince Edward Island</option>
        <option class="can" value="YK">Yukon Territory</option>
        <option class="can" value="NW">Northwest Territory</option>
        <option class="can" value="NU">Nunavut</option>
        <!-- american -->
        <option class="usa" value="WA">Washington</option>
        <!-- british -->
        <option class="uk" value="LND">London</option>
        <!-- aussie -->
        <option class="au" value="SYD">Sydney</option>
    </select>
<br />
<br />
<label for="phone">Phone Number: <input type="textbox" id="phone"/></label>
<br />
<label for="address">Address: <input type="textbox" id="address"/></label>
<br /><br />
<button form="registration" type="submit" formmethod="post" formaction="SERVER URL HERE" d="submit">Submit</button>
<button form="registration" type="reset" id="cancel">Cancel</button>

我所做的其他jquery尝试不会改变下拉列表。这个现在有下拉菜单(无论如何，第一步，三步(，但脚本似乎没有运行/工作......

关于如何使下拉列表工作的建议？

请注意，我需要扩展其他国家/地区的区域，然后也添加区号选择...但是为了走得那么远，我需要第一点工作......