Nous allons voir dans ce tutoriel comment ajouter un select avec javascript.
Un petit exemple pour comprendre. Créons notre structure html, qui va nous servir de base :
<!DOCTYPE html>
<!--
Copyright (c) 2018-2026 by LythandeDc (https://itamde.com/)
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>While Loop en JS</title>
<style>
form {
border: 2px solid red;
height: 200px;
}
</style>
</head>
<body>
<form name="data" id="data"></form>
</body>
</html>Le but maintenant, est celui d’ajouter le select et ses options dans le form avec l’identifiant data.
Tout d’abord, le code de base, avec la création de l’évènement DOMContentLoaded (rien de bien compliqué).
L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger. L’évènement load, très différent, doit être utilisé uniquement pour détecter une page entièrement chargée. C’est une erreur très répandue d’utiliser load quand DOMContentLoaded serait beaucoup plus approprié, alors soyez prudents.
Important, c’est de récupérer d’identifiant de notre formulaire. Créons la variable f.
Ensuite nous allons créer le tableau colors qui contiendra les options de notre select.
Un autre élément qui va nous servir est la variable combo qui va créer l’élément select.
Une fois que toutes nos variables sont en place, il faudra utiliser une boucle while dans laquelle on va définir toutes les options grâce à la longueur de notre tableau.
La méthode pop() supprime le dernier élément d’un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.
Option() est un constructeur qui sert à créer un HTMLOptionElement.
Enfin, il suffira d’ajouter la variable combo dans le formulaire grace à la méthode appendChild().
appendChild() ajoute un nœud à la fin de la liste des enfants d’un nœud parent spécifié. Si l’enfant donné est une référence à un nœud existant dans le document, appendChild() le déplace de sa position actuelle vers une nouvelle position (il n’est pas nécessaire de supprimer le noeud sur son noeud parent avant de l’ajouter à un autre).
Cela signifie qu’un nœud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d’abord retiré, puis ajouté à la nouvelle position. Le Node.cloneNode() peut être utilisé pour réaliser une copie de nœud avant de l’ajouter à son nouveau parent. Notez que les copies faites avec cloneNode ne seront pas automatiquement synchronisées.
Si l’enfant donné est un DocumentFragment , le contenu entier du DocumentFragment est déplacé dans la liste d’enfants du nœud parent spécifié.
<script>
window.addEventListener('DOMContentLoaded', function(){
var f = document.getElementById('data');
colors = ['red', 'green', 'blue', 'yellow'];
var combo = document.createElement('select');
while(colors.length)
{
var couleur = colors.pop();
var opt = new Option(couleur, couleur);
combo.options[combo.options.length] = opt;
}
f.appendChild(combo);
});
</script>Voilà, maintenant vous êtes prêts à manipuler votre formulaire grâce à Javascript !
➡️ Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
Voila, vous pouvez maintenant briller en soirée …
Formations de Itamde
- Parcours pour devenir un programmeur web
- Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
- Apprendre à coder en HTML et CSS : Cours Complet
- Parcours pour devenir un programmeur de jeux vidéo
- Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
- Apprenez à programmer en C#
- Apprenez à programmer en C++
0 commentaires