Javascript Dom Browser Client Side

Obtenir le Texte d’une Boîte Déroulante en JavaScript

Lorsque vous construisez des applications web interactives, vous pourriez avoir besoin d’extraire des informations des menus déroulants (également appelés boîtes de sélection). Bien qu’il soit relativement simple d’acquérir la valeur de l’option sélectionnée, vous pourriez rencontrer des difficultés lorsque vous essayez d’obtenir le texte affiché. Cet article de blog vous guidera à travers ce processus étape par étape, garantissant clarté et facilité de compréhension.

Le Problème : Récupérer le Texte Affiché

Considérons une situation où vous avez un menu déroulant dans votre HTML. Bien que vous puissiez facilement acquérir la valeur de l’option sélectionnée en utilisant le JavaScript suivant :

document.getElementById('newSkill').value

Vous pourriez avoir des difficultés si vous essayez d’obtenir le texte visible associé à cette option sélectionnée. Par exemple, si votre menu déroulant contient des compétences en tant qu’options, comment récupérer le nom de la compétence sélectionnée ? Voici la structure HTML pour référence :

<select name="newSkill" id="newSkill">
    <option value="1">Une compétence</option>
    <option value="2">Une autre compétence</option>
    <option value="3">Encore une autre compétence</option>
</select>

La Solution : Accéder au Texte Affiché

Pour récupérer le texte affiché de l’option actuellement sélectionnée dans le menu déroulant, vous pouvez utiliser quelques propriétés JavaScript. Suivez ces étapes pour le faire de manière efficace :

Implémentation du Code Étape par Étape

  1. Obtenez l’Élément Sélectionner : Tout d’abord, obtenez une référence au menu déroulant en utilisant document.getElementById().

    var skillsSelect = document.getElementById("newSkill");

  2. Déterminez l’Index Sélectionné : Vous pouvez savoir quelle option est actuellement sélectionnée en utilisant la propriété selectedIndex.

    var selectedIndex = skillsSelect.selectedIndex;

  3. Obtenez le Texte de l’Option Sélectionnée : Maintenant, accédez au tableau options en utilisant selectedIndex, et lisez la propriété text de l’option sélectionnée.

    var selectedText = skillsSelect.options[selectedIndex].text;

Exemple Complet

Voici l’implémentation complète du processus décrit ci-dessus :

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);  // Affiche le texte affiché de l'option sélectionnée

Explication du Code

  • document.getElementById("newSkill") : Cet appel de fonction récupère l’élément HTML <select> par son ID.

  • skillsSelect.selectedIndex : Cela vous donne le numéro d’index de l’option actuellement sélectionnée dans la boîte de sélection.

  • skillsSelect.options[selectedIndex].text : En utilisant l’index, vous accédez à l’option correspondante et récupérez la valeur de texte qui est visible pour les utilisateurs.

Conclusion

Extraire le texte affiché d’un menu déroulant peut améliorer l’interactivité de vos applications web. En comprenant comment naviguer dans le DOM et accéder aux propriétés des éléments HTML, vous vous donnerez les moyens de construire des expériences utilisateur plus engageantes et réactives. Maintenant, vous êtes équipé des connaissances nécessaires pour facilement récupérer les textes des options sélectionnées des boîtes déroulantes !

N’oubliez pas de pratiquer ces techniques dans vos propres projets, et regardez vos compétences en JavaScript continuer à se développer !