After Picking Us Or Canada Have The Appropriate States Or Provinces Show

[snowdog]

I would like after the user picks the counrty of CAN or USA the appropriate list of provinces or states shows up. Can I do this using javascript by hidding both then on change show the right one? I am a newbie here with javascript.

 

Here is my prov/state code

 

<p>
                    <label for="state">Franchise State</label>
                       <select class="target" name="f_state_prov">
                         <option>Choose One</option>
                          <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
   <option value="AZ">Arizona</option>
   <option value="AR">Arkansas</option>
   <option value="CA">California</option>
   <option value="CO">Colorado</option>
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="DC">Dist of Columbia</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="HI">Hawaii</option>
   <option value="ID">Idaho</option>
   <option value="IL">Illinois</option>
   <option value="IN">Indiana</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="MT">Montana</option>
   <option value="NE">Nebraska</option>
   <option value="NV">Nevada</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NM">New Mexico</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="ND">North Dakota</option>
   <option value="OH">Ohio</option>
   <option value="OK">Oklahoma</option>
   <option value="OR">Oregon</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="SD">South Dakota</option>
   <option value="TN">Tennessee</option>
   <option value="TX">Texas</option>
   <option value="UT">Utah</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WA">Washington</option>
   <option value="WV">West Virginia</option>
   <option value="WI">Wisconsin</option>
   <option value="WY">Wyoming</option>                         
                       </select>
                   </p>
 <div id="other">
 <p>
                    <label for="province">Franchise Province</label>
                       <select name="f_state_prov">
                         <option>Choose One</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NF">New Foundland</option>
    <option value="NT">Northwest Territories</option>
    <option value="NS">Nova Scotia</option>
    <option value="NT">Nunavut</option>
    <option value="ON">Ontario</option>
    <option value="PI">Prince Edward Island</option>
    <option value="PQ">Quebec</option>
    <option value="SA">Saskatchewan</option>
    <option value="YT">Yukon Territory</option>
                       </select>
 </p>
 </div>

 

Thanks for the help everyone

[codefossa]

You could try something like this. Although, I wrote the whole thing in JS, but that's up to you.

Example Demo: http://xaotique.no-ip.org/tmp/15/

 

HTML

<div id="location">
   <b>Your Location: </b>
</div>

 

Javascript / jQuery

$(document).ready(function()
{
   var places = {
       "United States": {
           "AK": "Alaska",
           "AZ": "Arizona",
           "AR": "Arkansas",
           "CA": "California"
       },
       "Canada": {
           "AB": "Alberta",
           "BC": "British Columbia",
           "MB": "Manitoba",
           "NB": "New Brunswick"
       }
   };

   var defaultText = $(document.createElement("option")).attr({ "disabled": true, "selected": true }).html("Select Country");
   var selectCountry = $(document.createElement("select")).append(defaultText), selectState = $();

   for (var i in places)
   {
       selectCountry.append($(document.createElement("option")).val(i).html(i));
   }

   $("#location").append(selectCountry);

   selectCountry.change(function()
   {
       if (selectState.length > 0);
           selectState.remove();

       selectState = $(document.createElement("select"));

       $.each(places[$(this).val()], function(i, v)
       {
           selectState.append($(document.createElement("option")).val(i).html(v));
       });

       $("#location").append(selectState);
   });
});