Atelier sur la balise SELECT

Quel que soit la nature d'un site web, il arrive très fréquemment que celui-ci contienne un formulaire. Les formuylaires sont effectivement très utilisé sur le grand réseau car il permettent d'acquérir certaine informations en provenance de la personne qui accède au site. Dans la plupart des cas, les formulaires sont tous dotés d'un programme de validation permettant ainsi le contrôle des entrées de l'utilisateur. Ces programmes sont souvent créé en javascript.

En effet, le language javascript permet l'accès à chacun des objets d'un formulaire tel l'objet select, qui correspond à la balise SELECT, celle-ci correspondant à une liste défilente dans laquelle l'utilisateur peut faire un choix. Plusieurs formulaires propose une liste déroulante dans laquelle l'utilisateur fait un choix. Lorsque ce choix est fait, une seconde liste déroulante se remplis d'informations correspondantes au choix de la première liste. L'exemple de cet article vise à démontrer cette technique. L'exemple propose une liste défilante contenant des noms de pays. Lorsque la personne choisit un pays, les noms des villes associées à ce pays sont présentées dans la seconde liste.

Listing 1.0 Liaison de balises SELECT

1. <html>
2. <head>
3. <title></title>
4. <script language="javascript">
5. <!-- Début du script
6.  monTableau = new Array(3)
7.  monTableau[0] = new Array(2);
8.  monTableau[1] = new Array(2);
9.  monTableau[2] = new Array(2);
10.  monTableau[0][0] = "Canada";
11.  monTableau[1][0] = "France";
12.  monTableau[2][0] = "États-Unis";
13.  monTableau[0][1] = new Array();
14.  monTableau[1][1] = new Array();
15.  monTableau[2][1] = new Array();
16.  monTableau[0][1][0] = "Québec"
17.  monTableau[0][1][1] = "Montréal"
18.  monTableau[0][1][2] = "Toronto"
19.  monTableau[0][1][2] = "Vancouver"
20.  monTableau[1][1][0] = "Paris"
21.  monTableau[1][1][1] = "Lion"
22.  monTableau[2][1][0] = "New York"
23.  monTableau[2][1][1] = "Portland"
24.  monTableau[2][1][2] = "Boston"
25.  monTableau[2][1][3] = "Los Angeles"
26.  function select1_onchange(strChoix)
27.  {
28.   document.formulaire.select2.options.length = 0;
29.   for(var x=0;x<monTableau.length;x++)
30.   {
31.    if (monTableau[x][0] == strChoix)
32.    {
33.     for(var y=0;y<monTableau[x][1].length;y++)
34.     {
35.      opt = y==0?new Option(monTableau[x][1][y],monTableau[x][1][y],true,true):new Option(monTableau[x][1][y],monTableau[x][1][y],false,false);
36.      document.formulaire.select2.options[y] = opt;
37.     }
38.    }
39.   }
40.  }

Listing 1.0 (suite)

41. // Fin du script -->
42. </script>
43. </head>
44. <body>
45. <form name="formulaire">
46. <p>Liste des pays:</p>
47. <p>
48. <select name="select1" onchange="select1_onchange(this[this.selectedIndex].value)">
49.  <option value="none" selected>Sélectionnez un pays</option>
50.  <option value="Canada">Canada</option>
51.  <option value="France">France</option>
52.  <option value="États-Unis">États-Unis</option>
53. </select>
54. </p>
55. <p>Liste des villes associées à ce pays:</p>
56. <select name="select2">
57. </select>
58. </body>
59. </html>

Détail du listing:

Les lignes 6 à 25 représentent la création d'un tableau à plusieurs dimenssions permettant de loger les informations relative à la seconde liste c'est à dire, les noms de villes. Le formulaire contenant les deux listes est créé à la ligne 45. La première liste est créée à la ligne 48. Les lignes 50, 51 et 52 sont la liste des options de cette première liste. La seconde liste pour sa part est définie à la ligne 56.

Les lignes 26 à 40 sont la définition d'une de la fonction select1_onchange qui sert à exécuté le traitement. Cette fonction est appellée lors de l'activation de l'événement onchange sur la balise 'select1' (la balise de la première liste de défilement). Lorsque l'utilisateur fait un choix, l'événement onchange démarre. Celui-ci appelle la fonction en lui soumettant la valeur correspondant au choix de l'utilisateur en paramètre.

La première instruction de la fonction (ligne 28) permet de vider le contenu de la seconde liste de défilement en affectant 0 à la propriété length de l'objet options de la liste. La ligne 29 est le début d'une boucle permettant de vérifier la correspondance entre l'élément choisit et les noms de pays logés dans le tableau. Une seconde boucle débute à la ligne 33. Cette boucle permet l'accès au noms de villes. À la ligne 35, un nouvel objet est créé. Cet objet est de type Option et correspond à la création d'une nouvelle balise OPTION. À son premier tour, les deux dernier paramètres de l'objet sont affectés des valeurs, true et true se qui signifi que l'objet sera sélectionné et considéré comme étant l'objet sélectionné par défaut. Durant les tours suivant, l'objet sera créé avec les paramètres, false et false ce qui signifi que l'option créée ne sera pas pré-sélectionnée. L'instuction de la ligne 36 permet l'accès à la collection d'options. Elle crée une nouvelle option en case y, c'est à dire à la valeur temporaire de l'indice à ce moment de l'exécution de la boucle.

Retour à A525G

par: Sylvain B. 15 aout 2001