Remarque : en raison des différentes manières de sélectionner plusieurs éléments et de la notification supplémentaire aux utilisateurs que plusieurs sélections sont disponibles, il est recommandé d'utiliser des cases à cocher au lieu de la liste déroulante.

Nom : spécifie le nom de la liste déroulante. Il peut être utilisé pour accéder aux données d'un formulaire après sa soumission, ou pour référencer un élément en JavaScript. taille : Indique le nombre d'options visibles dans la liste déroulante. Si l'attribut size est supérieur à 1 mais inférieur au nombre total d'options dans la liste, le navigateur ajoutera automatiquement une barre de défilement pour indiquer qu'il y a plus d'options à afficher.

La balise HTML d'option est utilisée pour créer une liste déroulante qui permet à l'utilisateur de sélectionner une option à partir d'un ensemble prédéfini de valeurs.

Le texte visible par l'utilisateur peut être différent du texte spécifié dans l'attribut value. Voici comment créer une liste déroulante :

Vert Jaune Le noir

• La liste déroulante est créée à l'aide de la balise ;
  À l'intérieur de l'étiquette
  définit les options de sélection à l'aide d'une balise ;
• Dans la balise l'attribut value peut être utilisé pour accéder à l'option sélectionnée avec en utilisant PHP, JS, Jquery, etc.

Il est également possible de spécifier une classe CSS au lieu d'utiliser un ID pour définir le style de la liste déroulante.

Dans la section suivante, je montrerai des exemples d'utilisation de la liste déroulante HTML dans JavaScript / JQuery. Les exemples vous montreront également comment styliser avec en utilisant CSS/ CSS3 et le cadre Bootstrap.

Un exemple de création d'une liste déroulante simple

Dans ce exemple HTML L'option de sélection est utilisée pour créer une liste déroulante avec trois options au choix :

L'exemple ci-dessus utilise le balisage suivant pour créer la liste déroulante :

5 10 15 20 25

Utilisation de l'attribut value

Comme mentionné précédemment, la valeur de l'attribut value peut être différente du texte affiché sur la page. Par exemple, vous pouvez afficher les noms de pays ou de couleurs pour les utilisateurs et utiliser des codes courts dans l'attribut value.

Dans l'exemple suivant, nous allons créer une liste déroulante avec un attribut value :

Voir la démo en ligne et le code

Pour l'étiquette le code suivant est utilisé :

Bordeaux Vert Jaune Bleu rouge

Exemple d'accès à une option sélectionnée en JavaScript

Créons maintenant un exemple d'accès à la valeur de l'option sélectionnée et d'exécution de certaines actions. Nous créons la même liste que dans l'exemple ci-dessus avec des options de sélection de couleurs. Une fois sélectionné, cliquez sur le bouton pour appliquer cette couleur à votre document :

Voir la démo en ligne et le code

La valeur de l'option HTML utilise le code suivant :

Bordeaux Vert Jaune Bleu rouge Autre

La ligne de code suivante est utilisée en JavaScript pour accéder à la valeur de l'attribut value d'une variante :

var seltheme = document.getElementById (« selcolor »).

Lorsque le bouton est cliqué, la fonction JS est appelée, qui affecte la valeur sélectionnée dans la liste déroulante à la variable. Cette valeur est utilisée pour appliquer la couleur au document courant.

Accéder au texte visible dans JQuery

Cette fois, j'utiliserai JQuery pour accéder à la valeur de l'option sélectionnée, à la fois du texte et de la valeur. Pour cette démo, j'accéderai au texte visible dans la balise option en HTML :

Voir la démo en ligne et le code

Dans le code de chaque option de la balise

le sens est différent du texte. Après avoir choisi une couleur, jQuery affiche le texte visible dans l'alerte. Code de balise Suivant:

Bordeaux Vert Jaune Bleu rouge

Voici comment cette valeur est accessible dans Option de sélection HTML sélectionnée JavaScript:

var selectedcolor = $ ("# option jqueryselect : sélectionné"). text ();

Il est également possible d'accéder à la valeur en utilisant la méthode JQuery $ .val() :

var selectedcolor = $ ("# jqueryselect"). val ();

Remplacez cette ligne dans l'exemple ci-dessus et le code affichera la valeur shortcode/couleur dans l'attribut value plutôt que le texte visible.

Un exemple d'obtention d'une valeur dans un script PHP

Dans cet exemple d'obtention de la valeur de l'option sélectionnée dans la liste déroulante, le formulaire est créé à l'aide de la balise dans la section balisage. Après avoir choisi une couleur dans la liste déroulante, cliquez sur le bouton « Envoyer ». Les données du formulaire seront envoyées dans le même fichier PHP, après quoi la couleur sélectionnée sera affichée :

Voir la démo en ligne et le code

La méthode de formulaire utilisée dans l'exemple est POST, il est donc possible d'obtenir les valeurs du formulaire en utilisant tableau PHP$ _POST [“”]. Voici le code du formulaire utilisé dans l'exemple :

Sélectionnez une couleur :

Bordeaux Vert Jaune Bleu rouge