Comment obtenir l'option sélectionnée $ (this) dans jQuery?


91

Le code suivant fonctionne:

$("#select-id").change(function(){
  var cur_value = $('#select-id option:selected').text();
  . . .
});

Comment refactoriser la deuxième ligne en:

var cur_value = $(this).***option-selected***.text();

Pour quoi utilisez-vous ***option-selected***?

Réponses:


120

Pour la valeur sélectionnée: $(this).val()

Si vous avez besoin de l'élément d'option sélectionné, $("option:selected", this)


101
 $(this).find('option:selected').text();

Cela a parfaitement fonctionné pour moi - j'ai essayé $("option:selected", this)comme mentionné ci-dessus, mais c'était problématique. J'utilisais un clic de bouton pour ajouter le texte de l'élément d'option sélectionné à un autre div, mais quand j'ai cliqué sur le bouton, cela a en fait changé l'élément sélectionné ... bizarre. Utilisez celui-ci.
skwidbreth

53

Le meilleur et le plus court moyen à mon avis pour les événements onchange dans la liste déroulante pour obtenir l'option sélectionnée:

$('option:selected',this);

pour obtenir l'attribut value:

$('option:selected',this).attr('value');

pour obtenir la partie affichée entre les balises:

$('option:selected',this).text();

Dans votre échantillon:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});

Ne pas utiliser .context, il est obsolète depuis jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx

Oui, mais ce que vous voulez dire, c'est ceci: api.jquery.com/context $ ("ul", document.body) .context.nodeName que je n'utilise pas
angelmedia

1
J'aime la réponse mais pourquoi est-ce préférable?
Sébastien Gicquel



9

Vous pouvez utiliser findpour rechercher l'option sélectionnée qui est un descendant du ou des nœuds pointés par l'objet jQuery actuel:

var cur_value = $(this).find('option:selected').text();

Comme il s'agit probablement d'un enfant immédiat, je suggérerais en fait d'utiliser à la .childrenplace:

var cur_value = $(this).children('option:selected').text();

7
var cur_value = $(this).find('option:selected').text();

Comme il optionest probable que vous soyez un enfant immédiat de selectvous, vous pouvez également utiliser:

var cur_value = $(this).children('option:selected').text();

http://api.jquery.com/find/


Où obtenez-vous option-selectedsans guillemets ...?
Platinum Azure

C'était une faute de frappe lorsque j'ai posté. Correction de la réponse.
thomthom

find('option:selected')renvoie une chaîne vide pour moi. Quelle version de jQuery est requise? Je travaille en 1.6.1. children('option:selected')fonctionne.
B Seven

option:selectedest là depuis la v1.0 api.jquery.com/selected-selector
thomthom

0

Meilleure estimation:

var cur_value = $('#select-id').children('option:selected').text();

J'aime mieux les enfants dans ce cas parce que vous savez que vous ne descendez qu'une seule branche dans l'arbre DOM ...


Peut-être que vous vouliez vraiment dire var cur_value = $ (this) .children ('option: selected'). Text ();
Joe Johnston

0

C'est juste

$(this).val();

Je pense que jQuery est assez intelligent pour savoir ce dont vous avez besoin

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.