Alpine.js - HTML : Rédirection vers la valeur d'un champ select

Mis à jour il y a 5 mois

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.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

HTML, Alpine.js

Sommaire

Introduction
Installer Alpine.js
Champ <select> avec des <option>
Réactivité avec Alpine.js

Voir aussi Trois méthodes sont expliquées pour récupérer des données entre les dates de début et de fin d'un modèle dans un projet Laravel 10. En savoir plus

Introduction

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

Installer Alpine.js

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.

Champ <select> avec des <option>

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 :

Réactivité avec Alpine.js

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 :

Insérons la directive x-data="{ link : '' }" pour définir la propriété link qui va contenir la valeur (attribut value) de l'option <option> choisie
Lions la valeur de l'option avec la propriété link en utilisant la directive x-model="link"
Au moment d'initialisation de l'élement <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 ! 😉

#html #alpine.js

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