Comment définir la valeur sélectionnée d'un contrôle select via sa description texte ?
Grâce à JQuery, il est possible de modifier la valeur sélectionnée d'un contrôle select selon le texte contenu dans une option.
Le langage JavaScript permet par défaut de sélectionner une option pour un en fonction de sa valeur. Grâce à JQuery, il est possible de modifier la valeur sélectionnée d'un contrôle select selon le texte contenu dans une option.
Pour réaliser cette sélection, il faut utiliser la fonction filter(). Cette fonction effectue un filtre sur les éléments sélectionnés et ne conserve dans la sélection que ceux pour lesquels la fonction de filtre retourne true. Il suffit ensuite de comparer le texte de l'option dans la fonction de filtre. Pour sélectionner ensuite l'option, si vous utilisez une version de JQuery à partir de la version 1.6, il faut faire appel à la méthode prop(), indiquer la propriété selected en premier argument et la valeur true en deuxième.
Un
Deux
//JavaScript
var monTexte = Deux;
$(select option).filter(function() {
//Le mot-clé this s'applique à chaque élément sélectionné
//La fonction text() retourne le texte contenu
return $(this).text() == monTexte;
}).prop(selected, true);
Si vous utilisez une version de JQuery comprise entre la version 1.4 et la version 1.6, la méthode prop() n'existe pas encore. Il faut à la place faire appel à la méthode attr(). Cette méthode permet d'ajouter ou de modifier un attribut pour une balise. Cette technique ne fonctionne plus du tout à partir de la version 1.9 de JQuery.
var monTexte = Deux;
$(select option).filter(function() {
//Le mot-clé this s'applique à chaque élément sélectionné
//La fonction text() retourne le texte contenu
return $(this).text() == monTexte;
}).attr(selected, selected);
Si la version de JQuery que vous utilisez est antérieure à la version 1.4, alors la méthode val(), qui permet d'affecter la valeur à un fonctionne à la fois pour une valeur ou pour un texte d'une option.
// Ces deux écritures sélectionnent l'option deux
$('select').val(2);
$('select').val(Deux);