在州選擇更改國家

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上的小例子