On state select change country

Question

Hello,

I have two lists (one of states) and one of (countries). I want to have it so when a user selects Alberta it sets the country to Canada, and so on and so forth.

I have the following javascript

var states = new Array(12)

states[0] = "AB";
states[1] = "BC";
states[2] = "MB";
states[3] = "NB";
states[4] = "NL";
states[5] = "NT";
states[6] = "NV";
states[7] = "NS";
states[8] = "ON";
states[9] = "PE";
states[10] = "QC";
states[11] = "SK";
states[12] = "YK";

function oc(a)
{
  var o = {};
  for(var i=0;i<a.length;i++)
  {
    o[a[i]]='';
  }
  return o;
}

if(oc(document.forms[0].state_o.value) in states) {
    document.forms[0].country_o.options("Canada").selected = true;
}

State List

<select name="state_o" id="state_o">
                                                        <option value=''></option>
<option value="AB" style='color: red'>Alberta</option>
<option value="BC" style='color: red'>British Columbia</option>
<option value="MB" style='color: red'>Manitoba</option>
<option value="NB" style='color: red'>New Brunswick</option>
<option value="NL" style='color: red'>Newfoundland</option>
<option value='NT' style='color: red'>Northwest Territories</option>
<option value='NV' style='color: red'>Nunavut</option>
<option value="NS" style='color: red'>Nova Scotia</option>
<option value="ON" style='color: red'>Ontario</option>
<option value="PE" style='color: red'>Prince Edward Island</option>
<option value="QC" style='color: red'>Quebec</option>
<option value="SK" style='color: red'>Saskatchewan</option>
<option value='YK'  style='color: red'>Yukon Territory</option>

Country List

    <select name="country_o">
                                                    <option value=''></option>
                                                    <option value="Canada">Canada</option>
                                                    <option value="United States">United States</option>
                                                    <option value="Europe">Europe</option>
                                                </select>

Now the problem is it doesn't seem to be working. I'm setting up an array, and then converting it to an object using oc function then checking to see if it is in the object list and if it is set the proper country selected to true.

Any help?

Answer 1

I see no assignment to the onchange-event of state-o where the aimed selection of the proper country could be achieved.

What about this solution? I'm creating an object, where the states are associated to the appropriate country via the index in the select box. The selection itself is triggered by calling the function selectCountry() in the onchange-event of state-o.

var states = {
    "AB": 1,    // 1 = Canada
    "NY": 2,    // 2 = USA
    // ...
    "YK": 1
};

function selectCountry(sel) {
    document.getElementById("country_o").selectedIndex = states[sel.value];
}
​


<select name="state_o" onchange="selectCountry(this)">
    <option value=""></option>
    <option value="AB">Alberta</option>
    <option value="YK">Yukon Territory</option>
    <option value="NY">New York</option>
    <!-- ... -->
</select>

<select name="country_o" id="country_o">
    <option value=""></option>
    <option value="Canada">Canada</option>
    <option value="USA">USA</option>
    <!- ... -->
</select>

Small example on jsbin.com