Remplissage d'une boîte de sélection avec certains éléments du tableau

Question

J'ai un formulaire et je dois remplir les options d'une boîte de sélection nommée comté (à partir d'un tableau) en fonction de ce que l'utilisateur sélectionne dans la boîte de sélection pays (par exemple l'utilisateur sélectionne GB dans la zone country et la zone county contient les options pour tous les comtés GB du tableau). Le code que j'ai rempli dans la boîte de sélection, mais met une option dedans pour chaque valeur dans le tableau (un vide pour les valeurs ne correspondent pas et un rempli pour l'endroit où ils correspondent.C'est un gros problème parce que J'ai plus de 4000 articles dans mon tableau, mais veulent seulement revenir quelques résultats Voici les 50 premiers éléments du tableau:.

ISO_3316_2[0][0] = "AF"; 
ISO_3316_2[0][1] = "AF-BDS"; 
ISO_3316_2[0][2] = "Badakhshan"; 
ISO_3316_2[1][0] = "AF"; 
ISO_3316_2[1][1] = "AF-BDG"; 
ISO_3316_2[1][2] = "Badghis"; 
ISO_3316_2[2][0] = "AF"; 
ISO_3316_2[2][1] = "AF-BGL"; 
ISO_3316_2[2][2] = "Baghlan"; 
ISO_3316_2[3][0] = "AF"; 
ISO_3316_2[3][1] = "AF-BAL"; 
ISO_3316_2[3][2] = "Balkh"; 
ISO_3316_2[4][0] = "AF"; 
ISO_3316_2[4][1] = "AF-BAM"; 
ISO_3316_2[4][2] = "Bamian"; 
ISO_3316_2[5][0] = "AF"; 
ISO_3316_2[5][1] = "AF-DAY"; 
ISO_3316_2[5][2] = "Daykondi"; 
ISO_3316_2[6][0] = "AF"; 
ISO_3316_2[6][1] = "AF-FRA"; 
ISO_3316_2[6][2] = "Farah"; 
ISO_3316_2[7][0] = "AF"; 
ISO_3316_2[7][1] = "AF-FYB"; 
ISO_3316_2[7][2] = "Faryab"; 
ISO_3316_2[8][0] = "AF"; 
ISO_3316_2[8][1] = "AF-GHA"; 
ISO_3316_2[8][2] = "Ghazni"; 
ISO_3316_2[9][0] = "AF"; 
ISO_3316_2[9][1] = "AF-GHO"; 
ISO_3316_2[9][2] = "Ghowr"; 
ISO_3316_2[10][0] = "AF"; 
ISO_3316_2[10][1] = "AF-HEL"; 
ISO_3316_2[10][2] = "Helmand"; 
ISO_3316_2[11][0] = "AF"; 
ISO_3316_2[11][1] = "AF-HER"; 
ISO_3316_2[11][2] = "Herat"; 
ISO_3316_2[12][0] = "AF"; 
ISO_3316_2[12][1] = "AF-JOW"; 
ISO_3316_2[12][2] = "Jowzjan"; 
ISO_3316_2[13][0] = "AF"; 
ISO_3316_2[13][1] = "AF-KAB"; 
ISO_3316_2[13][2] = "Kabul [Kabol]"; 
ISO_3316_2[14][0] = "AF"; 
ISO_3316_2[14][1] = "AF-KAN"; 
ISO_3316_2[14][2] = "Kandahar"; 
ISO_3316_2[15][0] = "AF"; 
ISO_3316_2[15][1] = "AF-KAP"; 
ISO_3316_2[15][2] = "Kapisa"; 
ISO_3316_2[16][0] = "AF"; 
ISO_3316_2[16][1] = "AF-KHO"; 
ISO_3316_2[16][2] = "Khowst"; 
ISO_3316_2[17][0] = "AF"; 
ISO_3316_2[17][1] = "AF-KNR"; 
ISO_3316_2[17][2] = "Konar [Kunar]"; 
ISO_3316_2[18][0] = "AF"; 
ISO_3316_2[18][1] = "AF-KDZ"; 
ISO_3316_2[18][2] = "Kondoz [Kunduz]"; 
ISO_3316_2[19][0] = "AF"; 
ISO_3316_2[19][1] = "AF-LAG"; 
ISO_3316_2[19][2] = "Laghman"; 
ISO_3316_2[20][0] = "AF"; 
ISO_3316_2[20][1] = "AF-LOW"; 
ISO_3316_2[20][2] = "Lowgar"; 
ISO_3316_2[21][0] = "AF"; 
ISO_3316_2[21][1] = "AF-NAN"; 
ISO_3316_2[21][2] = "Nangrahar [Nangarhar]"; 
ISO_3316_2[22][0] = "AF"; 
ISO_3316_2[22][1] = "AF-NIM"; 
ISO_3316_2[22][2] = "Nimruz"; 
ISO_3316_2[23][0] = "AF"; 
ISO_3316_2[23][1] = "AF-NUR"; 
ISO_3316_2[23][2] = "Nurestan"; 
ISO_3316_2[24][0] = "AF"; 
ISO_3316_2[24][1] = "AF-ORU"; 
ISO_3316_2[24][2] = "Oruzgan [Uruzgan]"; 
ISO_3316_2[25][0] = "AF"; 
ISO_3316_2[25][1] = "AF-PIA"; 
ISO_3316_2[25][2] = "Paktia"; 
ISO_3316_2[26][0] = "AF"; 
ISO_3316_2[26][1] = "AF-PKA"; 
ISO_3316_2[26][2] = "Paktika"; 
ISO_3316_2[27][0] = "AF"; 
ISO_3316_2[27][1] = "AF-PAN"; 
ISO_3316_2[27][2] = "Panjshir"; 
ISO_3316_2[28][0] = "AF"; 
ISO_3316_2[28][1] = "AF-PAR"; 
ISO_3316_2[28][2] = "Parwan"; 
ISO_3316_2[29][0] = "AF"; 
ISO_3316_2[29][1] = "AF-SAM"; 
ISO_3316_2[29][2] = "Samangan"; 
ISO_3316_2[30][0] = "AF"; 
ISO_3316_2[30][1] = "AF-SAR"; 
ISO_3316_2[30][2] = "Sar-e Pol"; 
ISO_3316_2[31][0] = "AF"; 
ISO_3316_2[31][1] = "AF-TAK"; 
ISO_3316_2[31][2] = "Takhar"; 
ISO_3316_2[32][0] = "AF"; 
ISO_3316_2[32][1] = "AF-WAR"; 
ISO_3316_2[32][2] = "Wardak [Wardag]"; 
ISO_3316_2[33][0] = "AF"; 
ISO_3316_2[33][1] = "AF-ZAB"; 
ISO_3316_2[33][2] = "Zabol [Zabul]"; 
ISO_3316_2[34][0] = "AL"; 
ISO_3316_2[34][1] = "AL-BR"; 
ISO_3316_2[34][2] = "Berat"; 
ISO_3316_2[35][0] = "AL"; 
ISO_3316_2[35][1] = "AL-BU"; 
ISO_3316_2[35][2] = "Bulqiz"; 
ISO_3316_2[36][0] = "AL"; 
ISO_3316_2[36][1] = "AL-DL"; 
ISO_3316_2[36][2] = "Delvin"; 
ISO_3316_2[37][0] = "AL"; 
ISO_3316_2[37][1] = "AL-DV"; 
ISO_3316_2[37][2] = "Devoll"; 
ISO_3316_2[38][0] = "AL"; 
ISO_3316_2[38][1] = "AL-DI"; 
ISO_3316_2[38][2] = "Dib"; 
ISO_3316_2[39][0] = "AL"; 
ISO_3316_2[39][1] = "AL-DR"; 
ISO_3316_2[39][2] = "Durr"; 
ISO_3316_2[40][0] = "AL"; 
ISO_3316_2[40][1] = "AL-EL"; 
ISO_3316_2[40][2] = "Elbasan"; 
ISO_3316_2[41][0] = "AL"; 
ISO_3316_2[41][1] = "AL-FR"; 
ISO_3316_2[41][2] = "Fier"; 
ISO_3316_2[42][0] = "AL"; 
ISO_3316_2[42][1] = "AL-GJ"; 
ISO_3316_2[42][2] = "Gjirokast"; 
ISO_3316_2[43][0] = "AL"; 
ISO_3316_2[43][1] = "AL-GR"; 
ISO_3316_2[43][2] = "Gramsh"; 
ISO_3316_2[44][0] = "AL"; 
ISO_3316_2[44][1] = "AL-HA"; 
ISO_3316_2[44][2] = "Has"; 
ISO_3316_2[45][0] = "AL"; 
ISO_3316_2[45][1] = "AL-KA"; 
ISO_3316_2[45][2] = "Kavaj"; 
ISO_3316_2[46][0] = "AL"; 
ISO_3316_2[46][1] = "AL-ER"; 
ISO_3316_2[46][2] = "Kolonj"; 
ISO_3316_2[47][0] = "AL"; 
ISO_3316_2[47][1] = "AL-KO"; 
ISO_3316_2[47][2] = "Kor"; 
ISO_3316_2[48][0] = "AL"; 
ISO_3316_2[48][1] = "AL-KR"; 
ISO_3316_2[48][2] = "Kruj"; 
ISO_3316_2[49][0] = "AL"; 
ISO_3316_2[49][1] = "AL-KU"; 
ISO_3316_2[49][2] = "Kuk"; 

Et est ici la fonction javascript:

function ISO3316CountyChange(country) { 

    //Empty the options array 
    document.test.county.options.length = 0; 

    //For every item in the array 
    for (i=0; i<ISO_3316_2.length; i++){ 

     //If the ISO 3316 alpha 2 value in the array matches the ISO 3316 alpha 2 value from the country select field 
     if(ISO_3316_2[i][0] == country) { 

      //Add an unselected option for the country with the ISO 3316-2 value as the value and the ISO 3316-2 name as the user visible value 
      document.test.county.options[i]=new Option(ISO_3316_2[i][2], ISO_3316_2[i][1], false, false); 

     }; 

    }; 

    //Add the default field 
    document.test.county.options[i]=new Option("Please select a county/state", "", true, true); 
}; 

Et voici le formulaire:

<form name="test"> 

<select name="country" onChange="ISO3316CountyChange(this.value)"> 
    <option value="" selected="selected">Please select a country</option> 
    <option value="AF">AF</option> 
    <option value="GB">GB</option> 
    <option value="US">US</option> 
</select> 

<select name="county"> 
    <option value="">Please select a country first</option> 
</select> 

La meilleure façon de tester cela avec l'extrait de tableau est de sélectionner l'option « AF », comme cet extrait contient des entrées pour l'Afghanistan (AF) et l'Albanie (AL).

EDIT

Merci Max, qui a travaillé une bonne part d'un modifiant :). Voici la nouvelle fonction:

// Changer les comtés dans les comtés cochez la case fonction ISO3316CountyChange (pays) {

//Empty the options array 
document.test.county.options.length = 0; 

//Add the default field 
document.test.county.options[0]=new Option("Please select a county/state", "", true, true); 

//Variable containing the index of next option you should use 
var nextOptionNum = 1; 

//For every item in the array 
for (i=0; i<ISO_3316_2.length; i++){ 

    //If the ISO 3316 alpha 2 value in the array matches the ISO 3316 alpha 2 value from the country select field 
    if(ISO_3316_2[i][0] == country) { 

     //Add an unselected option for the country with the ISO 3316-2 value as the value and the ISO 3316-2 name as the user visible value using the index of the next option 
     document.test.county.options[nextOptionNum]=new Option(ISO_3316_2[i][2], ISO_3316_2[i][1], false, false); 
     nextOptionNum++; //Increase the index ONLY if you used it 
    }; 

}; 

};

Answer 1

Essayez ceci:

int nextOptionNum = 0; //Variable containing the index of next option you should use 
//For every item in the array 
for (i=0; i<ISO_3316_2.length; i++){ 

    //If the ISO 3316 alpha 2 value in the array matches the ISO 3316 alpha 2 value from the country select field 
    if(ISO_3316_2[i][0] == country) { 

     //Add an unselected option for the country with the ISO 3316-2 value as the value and the ISO 3316-2 name as the user visible value 
     //Use the index of the next option 
     document.test.county.options[nextOptionNum]=new Option(ISO_3316_2[i][2], ISO_3316_2[i][1], false, false); 
     nextOptionNum++; //Increase the index ONLY if you used it 
    }; 
};