Bonjour à tous !

Comme vous le savez, JQuery est un Framework JavaScript qui a révolutionné la manière dont on peut générer des événements côté client. L’interaction entre JavaScript et HTML est devenue beaucoup plus aisée et standardisée grâce à JQuery.

Dans cet article, je montre comment gérer l’affichage des champs de formulaire grâce à JQuery qui affiche ou masque un champ si une valeur particulière d’un champ liste déroulante est sélectionnée.

Cliquez !

On a dans notre formulaire HTML une listes déroulante 'Type Article' avec Trois choix (Achat, Mais d oeuvre, Sous Traitance et Composé).

Le principe est que :

Si on choisit "Sous Traitance" ou "Mais d oeuvre", dans la liste déroulante, le champ "Competences" apparait au-dessous du Champ "Type Article".
Si on choisit autres choix c.-à-d. "Achat" ou "Composé" le champ "Competences" disparait.

Pour cela, il suffit de faire un script en utilisant la fonction « .change » qui détecte un changement de choix dans le menu déroulant et qui associe à chaque choix une action particulière.

Code JQuery :

$(document).ready(function() {
// [.change] Une fonction de JQuery à exécuter chaque fois que l'événement est déclenché.
    $("select[title='Type Article']").change(function() {
        var selected = $("select[title='Type Article']").val();
        if (selected == "Sous Traitance" || selected == "Mais d oeuvre") {

// [.fadeIn();] Fonction pour afficher le contenu du champ Compétence

// [.fadeOut();] Fonction pour cacher le contenu du champ Compétence
            $("#competences").fadeIn();
        }
        else {
            $("#competences").fadeOut();
        }
    });
});

NB : Avant d’appeler le Script il faut masquer le champ "Compétences" avec « Style= «Display : none » Et de lui affecter un id=competences

Cordialement.