Travailler avec un select en JavaScript

#1 Introduction open

Pour faire ce tutoriel, des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Si vous avez besoin, vous avez un tutoriel dans la partie HTML-CSS de ce site ici. De plus, si vous avez fait les tutoriels JavaScript sur le DOM, cette partie devrait vous paraître assez facile.

#2 Comment se présente le sélecteur en JavaScript ? open

  1. Prenez Sublime Text et créez un fichier select.html sur votre bureau.
  2. Tapez CTRL+SHIFT+G.
  3. Tapez !>(form>select>option[value=$]{$}*3)+script + TAB.
  4. Placez le curseur de Sublime devant le 1 du contenu du premier élément option, puis faire CTRL+ALT+ flèche vers le bas pour déplacer le curseur multiple de Sublime, puis vous tapez Choix, puis espace.
Tester le code
  1. Déclarez une variable elt et affectez-la à un querySelector() sur le select.
  2. Avec Sublime, faites un Open In Browser pour exécuter le fichier dans le navigateur (Prenez plutôt Chrome de sorte que l'on voit la même chose).
Tester le code
  1. Ouvrez la console et tapez elt.options.
  2. Développez et constatez que pour chaque option du select en HTML, vous avez en JavaScript une entrée dans le tableau options. Donc ici, vous retrouvez vos 3 options du HTML.
  3. Notez que vous avez une propriété length qui correspond évidemment à la taille du tableau.
  4. Vous avez également une propriété selectedIndex qui vous indique quel est l'option qui est sélectionnée (N'oubliez pas que l'on commence à zéro au niveau des éléments du tableau options).
Le tableau options
Le tableau des options du select en JavaScript
  1. Développez une entrée, vous constatez qu'il y a pas mal de choses. On va s'intéresser à 3 d'entres elles :
    • La propriété label qui correspond au contenu textuel de l'option.
    • La propriété selected qui est un booléen qui vous indique si l'entrée est sélectionnée ou pas (N'oubliez pas que l'on peut faire de la sélection multiple, car c'est dans ce cas là, que ça vous servira).
    • La propriété value qui correspond à la valeur du value de l'option.
  2. Développez le prototype HTMLOptionsCollection et constatez qu'il y a des méthodes pour ajouter des éléments ou les supprimer. Je vous montrerai plus loin dans ce tuto une autre façon d'ajouter un élément option à un select.
Le prototype du tableau options
Le proptype de l'objet tableau options du select en JavaScript

#3 La propriété selectedIndex open

  1. Vous pouvez connaître la position du sélecteur au moyen de la propriété selectedIndex. Vous pouvez y accéder directement au niveau de l'élément, (vous n'avez pas besoin de descendre sur le tableau options).
  2. Vous allez mettre en place un gestionnaire d'événement sur le select et demander à écouter l'événement change.
  3. Puis faire un console.log() du selectedIndex.
  1. Changez la position du sélecteur et constatez l'affichage dans la console de la valeur de la propriété selectedIndex.
  2. Constatez, entre autres, que pour la position Choix 1 le selectedIndex a la valeur 0.
Tester le code
  1. Maintenant, vous allez positionner le sélecteur à l'aide du selectedIndex. Affectez-lui la valeur 2, et constatez qu'il est positionné sur la position Choix 3.
Tester le code

#4 La propriété value open

  1. La valeur de value correspond à l'option sélectionnée. Remettez en place le gestionnaire d'événement et faites un console.log() de value.
Tester le code
  1. Supprimez le gestionnaire d'événement. Vous pouvez aussi positionner le sélecteur en vous servant de value. Affectez-lui la valeur 2 et constatez que le sélecteur se positionne sur cette valeur de value.
  2. Ajouter une option avec un value que vous affectez à la chaîne de caractères 'dix' et affectez value à 'dix'.
  3. Constatez que le sélecteur se positionne sur cette valeur.
Tester le code

#5 Le tableau options open

  1. Affichez avec des console.log() les valeurs des propriétés label, value, selected pour les options de rang 0 et 1.
Tester le code
  1. On va regarder maintenant comment ajouter une option. Il y a plusieurs façons de le faire et je vous montre la méthode que je préfère. Pour cela, créez une nouvelle instance de l'objet Option avec un new Option. Mettez en premier argument la valeur du label et en deuxième argument la valeur de value.
  2. Ajoutez ensuite ce nouvel élément en fin du tableau options.
Tester le code

#6 La sélection multiple avec un select open

  1. Au niveau HTML, ajoutez multiple dans la balise ouvrante select.
  2. Pour rappel, si côté serveur, vous voulez recevoir un tableau PHP, il faut mettre un attribut name égal à une variable avec une paire de crochets comme ceci name=choix[].
  3. Le problème ici, c'est que le selectedIndex est un entier et pas un tableau. Alors si on veut avoir le tableau des options qui sont sélectionnées, eh bien, il va falloir le fabriquer à partir d'un parcours du tableau options en testant la propriété selected pour chaque option.
  4. Avec la propriété size, fixez la valeur de la fenêtre du select à 3 éléments.
Tester le code

Politique de confidentialité

Mentions Légales