在州选择更改国家

Question

我有两个列表（一个州）和一个（国家）。 我想拥有它，因此当用户选择艾伯塔省时，将国家/地区设置为加拿大，依此类推。

我有以下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;
}

州清单

<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>

国家清单

    <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>

现在的问题是它似乎不起作用。 我正在设置一个数组，然后使用oc函数将其转换为对象，然后检查它是否在对象列表中以及是否将选择的正确国家/地区设置为true。

有什么帮助吗？

Answer 1

我看不到state-o的变化事件的任何分配，在那里可以实现对适当国家的有针对性的选择。

那这个解决方案呢？ 我正在创建一个object ，通过选择框中的索引将各州与相应的国家/地区相关联。 选择本身是通过在state-o的onchange -event中调用函数selectCountry()触发的。

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>

jsbin.com上的小例子