Dans l'état, sélectionnez le pays

Question

J'ai deux listes (l'une d'états) et l'autre de (pays). Je veux qu'il en soit ainsi lorsqu'un utilisateur choisit l'Alberta pour établir son pays au Canada, et ainsi de suite.

J'ai le javascript suivant

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

Liste des État

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

Pays Liste

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

Maintenant, le problème est qu'il ne semble pas fonctionner. Je suis en train de configurer un tableau, puis de le convertir en objet en utilisant la fonction oc puis en vérifiant s'il se trouve dans la liste des objets et s'il est défini, le pays approprié est sélectionné comme vrai.

Une aide?

Answer 1

Je ne vois aucune affectation à l'événement onchange de state-o où la sélection ciblée du pays approprié a pu être atteinte.

Et cette solution? Je crée un object, où les états sont associés au pays approprié via l'index dans la zone de sélection. La sélection elle-même est déclenchée en appelant la fonction selectCountry() dans le onchange -event de 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> 

petit exemple sur jsbin.com