Un tutoriel HTML pour récupérer la valeur d'une option <option> d'un champ <select> et rédiriger le client vers l'option (URL) choisie avec Alpine.js.
Alpine.js est un framework JavaScript minimal qui permet de manipuler le DOM HTML en offrant la nature réactive de Vue et React, mais avec beaucoup plus de simplicité.
Nous voulons voir dans ce guide comment l'utiliser pour récupérer la valeur d'une option <option>
d'une liste déroulante <select>
et rédiriger le client vers l'adresse indiquée en valeur d'option.
La version anglaise de cette publication : cliquer ici
Pour inclure Alpine.js dans une page HTML, nous pouvons utiliser la balise <script>
en indiquant son lien CDN via l'attribut src
:
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Alpine peut être aussi installé comme module via npm :
npm install alpinejs
La documentation d'Alpine.js présente plus d'informations sur ces deux façons de l'inclure dans votre projet.
La balise <select>
permet de présenter une liste déroulante avec des options <option>
. La valeur de chaque option est indiquée via l'attribut value
.
Pour notre exemple, nous allons partir du code suivant :
<select>
<!-- Les options -->
<option value="" disabled >Où voulez-vous aller ?</option>
<option value="index.html" >Accueil</option>
<option value="blog.html" >Blog</option>
<option value="contact.html" >Contact</option>
</select>
Ce code est rendu de la manière suivante dans le navigateur Google Chrome :
Alpine.js intervient au moment où nous voulons surveiller le changement de valeur de la liste déroulante pour rédiriger le client vers l'option choisie.
Nous allons procéder comme suit pour rendre le <select>
réactif :
x-data="{ link : '' }"
pour définir la propriété link
qui va contenir la valeur (attribut value
) de l'option <option>
choisielink
en utilisant la directive x-model="link"
<select>
, appelons la méthode magique $watch
pour surveiller le changement de la propriété link
et rédiriger le client vers la valeur de l'option : x-init="$watch('link', value => window.location = link)"
Le code complet HTML - Alpine.js :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML - AlpineJS : Rédirection vers une valeur d'un champ select</title>
</head>
<body>
<!-- <select> avec les directives Alpine.js -->
<select x-data="{ link : '' }" x-model="link" x-init="$watch('link', value => window.location = link)" >
<!-- Les options -->
<option value="" disabled >Où voulez-vous aller ?</option>
<option value="index.html" >Accueil</option>
<option value="blog.html" >Blog</option>
<option value="contact.html" >Contact</option>
</select>
<!-- On inclut Alpine.js 3.10.5 -->
<script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script>
</body>
</html>
Portez-vous bien ! 😉
Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.
Wilo Ahadi, l'auteur
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School
Voir profil
Commentaires