Liste déroulante et blocs changeants

Hello hello

Dans ce tutoriel, nous allons voir comment avoir un contenu qui change en fonction d'un choix dans une liste déroulante. Pour que ce soit plus clair, voici un exemple :



Nous allons donc diviser cette explication en deux parties :
• la partie html qui contiendra la liste déroulante ainsi que les contenus à afficher ;
• la partie javascript qui gérera l'affichage du bon bloc en fonction du choix effectué.
En revanche, nous ne nous attarderons pas ici sur la partie CSS.



Ici, il y a 2 choses à faire :
• la liste déroulante d'un côté,
• les contenus de l'autre.


En html, une liste déroulante est contenue dans un formulaire. On commence donc par ouvrir une balise "formulaire".

Code:


<form>
 <!-- Ma liste sera ici -->
</form>


Ensuite, on va commencer à créer la liste. Pour cela, nous allons utiliser la balise "select" à laquelle nous allons donné un nom (= name) qui nous sera utile pour récupérer la valeur choisie dans le js.

Code:


<form>
 <select name="selection">
 <!-- Mes choix seront ici -->
 </select>
</form>


Enfin, il nous reste à indiquer chaque option ou choix. Ici, il ne faut pas oublier d'indiquer pour chaque item une valeur (= value) qui nous servira dans le js. Pour plus de simpliciter de gestion, nous allons utiliser des nombres.
Et de mon coté, je vais afficher un bloc par défaut. Pour cela, je vais utiliser l'attribut "select" sur mon option.

Code:


<form>
 <select name="selection">
 <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
 <option value="1">Choix 1</option>
 <option value="2">Choix 2</option>
 <option value="3">Choix 3</option>
 </select>
</form>


Pour finir sur cette partie, il ne faut pas oublier d'appeler notre fonction javascript. Ici, elle va s'appliquer quand on changera notre choix. On va donc l'appeler sur un "onchange".

Code:


<form>
 <select name="selection" onchange="affich(this.form);">
 <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
 <option value="1">Choix 1</option>
 <option value="2">Choix 2</option>
 <option value="3">Choix 3</option>
 </select>
</form>


affich = le nom de ma fonction ; this.form = le formulaire sur lequel je suis


Pour cette partie, rien de plus simple ! On va créer autant de contenus que l'on a de choix (dans notre exemple, quatre). Chacun de ces contenus va être mis dans une div qui aura un id unique avec un numéro. Ce numéro correspond à la "value" du choix qui lui est associé. Par exemple, si pour mon bloc 1 que j'affiche en choisissant Choix 1, je vais lui donner le nom d'id contenu1.
En plus de cet id unique, on ajoute aussi pour chacun de ces blocs un display:none afin de ne pas l'afficher sauf pour mon bloc par défaut où, cette fois, je mettrai un display:block (souvenez-vous, c'est celui que l'on veut afficher par défaut)
Je vous montre l'exemple pour les deux blocs :

Code:


<div id="contenu0" style="display: block;"> <!-- mon bloc affiché par défaut -->
 <h1>Mon contenu de départ</h1>
 <p>Contenu de mon bloc afficher par défaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu1" style="display: none;">
 <h1>Mon contenu 1</h1>
 <p>Contenu de mon bloc 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>


Le HTML final :

Code:


<form>
 <select name="selection" onchange="affich(this.form);">
 <option value="0" select>Par défaut</option><!-- select = choix sélectionné par défaut -->
 <option value="1">Choix 1</option>
 <option value="2">Choix 2</option>
 <option value="3">Choix 3</option>
 </select>
</form>

<!-- Mes contenus -->
<div id="contenu0" style="display: block;"> <!-- mon bloc affiché par défaut -->
 <h1>Mon contenu de départ</h1>
 <p>Contenu de mon bloc afficher par défaut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu1" style="display: none;">
 <h1>Mon contenu 1</h1>
 <p>Contenu de mon bloc 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu2" style="display:none;">
 <h1>Mon contenu 2</h1>
 <p>Contenu de mon bloc 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>
<div id="contenu3" style="display:none;">
 <h1>Mon contenu 3</h1>
 <p>Contenu de mon bloc 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
</div>



Entre nous, le plus gros du travail est fait ^^

Si le js t'effraie, je tiens à te rassurer : ici il ne fait que 7 lignes de code En plus, tu vas voir, il est super simple !

Avant de nous lancer dans le code, réfléchissons à ce que doit faire ce js :

Quand je change de choix, il doit récupérer la valeur de ce que j'ai sélectionné, et, en fonction de ça, afficher le bloc correspondant.
Evidement, si je change de choix, il doit masquer l'ancien bloc et afficher le nouveau.

Bien ! Maintenant que nous avons ça, il ne nous reste plus qu'à le traduire en javascript. On commence tout en douceur

Dans ce tutoriel, on va jouer les "j'ai un poil dans la main et je le vis bien" en utilisant du jQuery afin d'avoir moins de choses à écrire. De ce fait, si tu utilises ce code sur un site, n'oublie pas d'appeler la bibliothèque jQuery :

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

C'est donc la déclaration de notre fonction.

Code:


function affich(LeForm){
 /* Ma fonction est ici */
}


"LeForm" correspond à ce que nous avons déclaré plus haut dans le onchange. Dans notre exemple, c'est donc "this.form". Tu va comprendre l'utilité juste après ^^


La fameuse "value". On va stocker cette information dans un variable "info_element". Une variable c'est une sorte de "case mémoire".

Code:

var info_element = LeForm.selection.value;

Essayons de comprendre ce code.
= la "case mémoire" dans laquelle je vais stocker la valeur
LeForm = l'information que l'on nous a donné lors de la déclation de la fonction (onchange="affich(this.form);"), c'est à dire "le formulaire sur lequel je me trouve".selection = le nom de ma liste déroulante
value = la valeur
Si on traduit le tout : je vais stocker dans "info_element", la valeur de la liste déroulante qui s'appelle "selection" et qui se trouve dans le formulaire sur lequel se trouve ma fonction.

En fonction de ça, afficher le bloc correspondant

On a récupéré la valeur de notre choix. Il ne nous reste plus qu'à dire "contenu + numéro du bloc choisi, affiche toi !". Si on traduit en code, cela signifie que l'on va appliquer un "display:block" à ce bloc.

Code:


 $('#contenu'+info_element+'').css({display: 'block'});


Il doit masquer l'ancien bloc

Ah ! Ça se complique un peu (un tout petit peu ^^). Si on veut masquer l'ancien bloc, il faut stocker à un moment ou à un autre cette information. Nous allons donc avoir besoin d'une nouvelle variable Il faut savoir qu'en javascript, une variable ne peut pas être utilisée si elle n'a pas été déclarée et initialisée au préalable. Nous allons donc le faire avant notre fonction

Code:

var lastChoice = 0;

Ici, on met l'ancien bloc à "0" au départ car, souviens-toi, par défaut c'est le bloc ayant la valeur 0 qui est affiché

Retournons dans notre fonction.

On a donc affiché le bon bloc avec un display:block. Eh bien sur le même principe, on va masquer l'ancien bloc avec un display:none sauf que cette fois, on va appliquer cette css sur "contenu + numéro du dernier bloc affiché".

Code:

$('#contenu'+lastChoice+'').css({display: 'none'});

Et pour finir, il faut dire à notre js : "maintenant, le dernier bloc affiché est celui que j'ai choisi"

Code:

lastChoice = info_element;

Le js final :

Code:


var lastChoice = 0; /* J'initialise la variable "ancien bloc" */
 
function affich(LeForm){
 var info_element = LeForm.selection.value; /* Je récupére la valeur de mon choix */
 
 $('#contenu'+info_element+'').css({display: 'block'}); /* J'affiche le bloc choisi */
 $('#contenu'+lastChoice+'').css({display: 'none'}); /* Je masque l'ancien bloc */

 lastChoice = info_element; /* Le bloc que j'ai choisi devient l'ancien bloc */

}