jQuery : comment obtenir le texte d'une liste déroulante (select) — analyse complète

Avez-vous déjà pensé : « Pourquoi je reçois la valeur, alors que j'ai besoin du texte ? »

Bienvenue sur PythonLib ! Aujourd'hui, nous allons analyser l'un des problèmes les plus courants rencontrés par les débutants comme par les développeurs frontend expérimentés. Vous créez un beau formulaire, vous ajoutez une liste déroulante (select box), vous écrivez un gestionnaire d'événements en jQuery… et soudain, vous réalisez que vous n'avez pas besoin de la value (code numérique du pays, ID du produit ou autre), mais du texte lisible que l'utilisateur voit dans le menu.

Cette question sur Stack Overflow a recueilli des milliers de vues et des dizaines de réponses. Nous ne nous contenterons pas d'en copier une — nous allons décomposer la tâche étape par étape, montrer plusieurs solutions et fournir un code prêt à l'emploi que vous pourrez intégrer immédiatement dans votre projet. C'est parti !

Problème : valeur vs. texte

Imaginez un code HTML typique :

<select id="citySelect">\n    <option value="1">Moscou</option>\n    <option value="2">Saint-Pétersbourg</option>\n    <option value="3">Novossibirsk</option>\n</select>

Lorsque l'utilisateur sélectionne « Saint-Pétersbourg », le code jQuery standard $('#citySelect').val() renverra « 2 ». Mais que faire si vous devez afficher « Saint-Pétersbourg » sur la page ? Ou envoyer le nom lisible à l'outil d'analyse ? C'est là que la magie de la navigation DOM entre en jeu.

Solution n°1 : approche classique avec .text()

La méthode la plus simple et intuitive consiste à obtenir l'élément <option> sélectionné, puis à extraire son contenu textuel.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('Vous avez sélectionné :', selectedText);\n});

Comment ça fonctionne ?
\n$(this) — référence à notre select (dans le gestionnaire d'événements).
\n.find('option:selected') — recherche parmi les options enfants celle qui possède l'attribut selected.
\n.text() — extrait le texte brut (sans balises HTML).

Bonus : si vous avez plusieurs selects sur la page, utilisez une classe ou un ID au lieu de this.

Solution n°2 : utiliser .children() et .filter()

Il est parfois plus pratique de travailler en filtrant les éléments enfants. Surtout si vous avez une imbrication complexe ou des balises personnalisées.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // Alternative avec filter :\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('Ville sélectionnée : ' + selectedText);\n});

La différence entre find() et children() est que children() ne cible que les descendants directs, tandis que find() cible tous les descendants, quel que soit leur niveau. Pour un select standard, cela n'a pas d'importance, mais il est utile de le savoir.

Solution n°3 : obtenir le texte au chargement de la page

Il est souvent nécessaire d'afficher le texte sélectionné immédiatement, sans attendre l'événement change. Par exemple, lors de l'initialisation d'un formulaire.

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('Ville actuelle : ' + initialText);\n});

Ce code s'exécute une fois au chargement du DOM et écrit le texte de l'option sélectionnée par défaut dans l'élément avec l'ID selectedCityDisplay.

Solution n°4 : fonction utilitaire universelle

Si vous développez une application sérieuse, il est judicieux d'extraire la logique dans une fonction séparée. Cela rendra le code plus propre et réutilisable.

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// Utilisation :\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co