Tuto Monde Informatique

JQuery propose par défaut des tas de fonctions super utiles mais qui sont assez peu utilisées. J’ai découvert la fonction clone il y a peu (en jetant un oeil sur mon mémento JQuery 1.4). Tu l’as peut-être deviné, la fonction clone() permet de dupliquer un élément du DOM dans la page.

Comme d’hab, je t’ai préparé une petite démo : Lien Démo

Pour mon exemple on va dupliquer une liste déroulante <select> (en fait tout le paragraphe qui le contient) pour permettre à l’utilisateur de sélectionner plusieurs catégories :

     <label for="categorie">Choisissez une catégorie :</label>
<select class="cat" name="categorie[]">
          <option>Sélectionnez une catégorie</option>
          <option value="jquery">JQuery</option>
          <option value="html">HTML</option>
          <option value="php">PHP</option>
          <option value="css">CSS</option>
     </select>

Les crochets à la fin de l’attribut name du select nous permettra de récupérer les valeurs des plusieurs select dupliqués en faisant un simple foreach (en PHP).

Passons maintenant à la partie JQuery (attention ça va aller très vite !) :

$(document).ready(function() {
     $('select.cat:last').live('change',function(){
          if( $(this).val() != '' )
          {
               $(this).parent().clone(true).insertAfter($(this).parent());
          }
     });
});

Et voilà ! Comme tu le sais probablement déjà la ligne 1 permet d’attendre que la page soit fini de charger (que le DOM soit ready).

A la ligne 2, le sélecteur select.cat:last permet de sélectionner uniquement le dernier select ayant la classe « cat ». Pour plus de renseignements sur l’événement « live », je t’invite à relire mon précédent article sur ce sujet. Donc quand la valeur de ce dernier select change, on exécute la suite.

La ligne 3 permet de tester si la valeur du select n’est pas vide.

L’astuce du jour se trouve véritablement à la ligne 5. Tout d’abord on sélectionne le parent du select (.parent()). On a donc tout le paragraphe. Ensuite on clone ce paragraphe (.clone()) et on l’insère après (insertAfter()) le paragraphe contenant le dernier select.

Ce n’était pas si compliqué que ça ? 

Et enfin, et parce que je suis super sympa, voici comment on récupère les valeurs en PHP de tous les select générés :

if( !empty( $_POST['categorie'] ) )
{
     foreach( $_POST['categorie'] as $categorie )
     {
          echo $categorie . '
';
          // faire ici le traitement voulu, le foreach va parcourir toutes les catégories du tableau
     }
}

Voili, voilou (comme dirait Flanders), c’était le retour des articles avec plein de JQuerydedans. Tiens-toi prêt, j’ai d’autres petites astuces en stock !