Select de HTML dynamique avec Ajax

Listes ou menus dynamiques avec la balise de formulaire SELECT, JavaScript et Ajax

En HTML 4, les listes déroulantes sont codées avec une balise select comportant une liste d'options:

<select>
  <option value="" selected>Pomme</option>
  <option value="">Orange</option>
</select>

Nous allons voir qu'il est facile modifier de façon dynamique une telle liste déroulante avec du code JavaScript.

Mieux encore, si l'on permet à l'utilisateur de modifier une liste, il faut pouvoir la sauvegarder et la charger lors d'une session ultérieure, et on verra comment l'accomplir en Ajax.

Attributs de SELECT

size: Le nombre de lignes affichées. Ex: size="10".

multiple: Si on peut sélectionner plusieurs éléments à la fois.

selectedIndex: Numéro de l'élément choisi, à partir de zéro.

Modification dynamique de SELECT

La balise select

Elle comporte au moins une option, et éventuellement un texte contenu et une valeur.

Exemple:

<option>Pomme</option

Avec une valeur et si l'option est sélectionnée par défaut :

<option value="Pomme" selected >Pomme</option>

Par exemple on peut utiliser le texte pour afficher le titre d'une page et value pour son URL. Le code JavaScript se chargera de récupérer ces données.

Pour retrouver en JavaScript le contenu d'une option, on utilise l'attribut text de option, tandis que l'attribut value retourne la valeur.

On suppose que le formulaire à pour nom form1 et la balise select le nom select1. On peut accéder à une option par son numéro d'indice dans la liste:

La première option à l'indice 0:

document.write(document.form1.select1[0].text);
document.write(document.form1.select1[0].value);

Modifier une option

Ceci étant posé, il devient facile de modifier une liste. Pour changer les valeurs, on les assigne à value.

document.form1.select1[0].value = "nouvelle valeur"; 

Pour changer le contenu, on crée un nouvel objet Option dont l'argument est le libellé contenu dans l'option.

document.form1.select1[0] = new Option("nouveau nom"); 

Ajouter une option

En sachant que le nombre d'options est donné par l'attribut length de l'objet select, on peut ajouter une nouvelle entrée en fin de liste en créant un objet Option:

var length = document.form1.select1.length;
document.form1.select1[length] = new Option("nouvelle entrée"); 

Supprimer une option

Pour supprimer une option on la rend nulle:

document.form1.select1[x] = null; 

Mais ce doit être la dernière dans la liste, et si ce n'est pas le cas on compresse la liste.

Par exemple si on a une liste de trois options:

<select>
   <option>Pomme</option>
   <option>Orange</option>
   <option>Cerise</option>
</select>

Et que l'on veut supprimer la seconde option on comprimera la liste ainsi:

for(i = 1; i < length; i++)
{
    document.form1.select1[i] = new Option(document.form1.select1[ i + 1].text);
}
document.form1.select1[length] = null;

Pour la compatibilité avec IE, il nous faudra aussi detecter et assigner un vide dans la liste, voir la démo.

Insérer une option

On procédera de la même façon, dans l'ordre inverse, si la position d'insertion est n:

for(i = length; i > n; i--)
{
  document.form1.select1[i] = document.form1.select1[i - 1];
}
document.form1.select1[n] = new Option("nouveau nom");

Charger et sauvegarder les options de SELECT

Deux fonctions Ajax ont été ajoutée à notre bibliothèque Dynamic Select.

dataRead lit un fichier sur le serveur. Ses arguments sont le nom du fichier et le nom d'une fonction appellé lorsque la requête est effectuée.

dataWrite appelle un script PHP sur le serveur. Les arguments sont la variable data qui contient les paramètres du script, le nom d'une fonction a appeler quand la requête est effectuée et le nom du formulaire.

Lorsque le contenu de la liste est sauvé, on active de façon différée le bouton submit du formulaire, mais ceci est une option pour la démo, et est indépendant de l'objet de cet article.

Chargement d'une liste d'option

La méthode onload de window exécute le script Ajax qui charge la liste avec la fonction dataRead, puis appelle la fonction populate qui crée les options de select.

function populate(content)
{
  content = content.replace(" ", "");
  var lst = content.split("<br>");
  var optlist = document.forms[0].select1;
  for(i = 0; i < lst.length; i++)
  {
    if(lst[i] == "") continue;
    optlist.options[i] = new Option(lst[i]);
  }
}

Dans le fichier, les noms sont séparés par le marqueur <br>, c'est un choix parmi d'autres.

Sauvegarder la liste

L'évènement onclick est associé à la fonction JavaScript saveList qui construit une chaîne de paramètre avec les options du select et l'envoie à un script PHP qui crée un fichier de texte utilisable lors d'une session ultérieure.

var formname =  document.forms[0];
var optlist = formname.select1;
var size = optlist.options.length;
for(i = 0; i < size; i++)
{
     title = optlist.options[i].text;
    if(data != "") data +="&";
    data += "tab" + String(i) + "=" + title;
}    	 
dataWrite("dynamic-save.php", data, loadapage, formname);

Le script PHP est évident, il récupére les paramètres et crée un fichier de texte and séparant les noms par la chaîne <br>.

Le code de cette bibliothèque Dynamic Select est mis en pratique dans la démonstration qui suit.

Démonstration de SELECT dynamique

Cette démo montre comment modifier la liste des options d'une balise SELECT dans un formulaire HTML.
La fonction de sauvegarde est désactivée dans la démonstration en ligne. Elle fonctionne dans la version contenue dans l'archive.

Le code JavaScript suffit à modifier la liste des OPTIONS du SELECT. Le code Ajax permet de charger une liste préétablie ou de sauver la nouvelle liste modifiée.

• Archive avec démo et code source.
  

<select>
<?php
for($i = 0; i$ < $lenght;$i++)
{
  echo "<option> ....";
}
</select>