Comment obtenir l'étiquette de l'option de sélection avec jQuery?


114
<select>
<option value="test">label </option>
</select>

La valeur peut être récupérée par $select.val().

Et le label?

Existe-t-il une solution qui fonctionnera dans IE6?


Vous voulez dire comment obtenir la valeur de sélectionné, la valeur sélectionnée? qui est dans votre étiquette de cas?
fourmi

Cette question devrait être reformulée pour dire "Comment obtenir le texte de l'option de sélection avec jQuery?" et toutes les références à l'étiquette doivent être remplacées par du texte pour éviter toute confusion avec l'attribut d'étiquette.
Joel Davis

Réponses:



22

Bonjour, donnez d'abord un identifiant à la sélection en tant que

<select id=theid>
<option value="test">label </option>
</select>

alors vous pouvez appeler l'étiquette sélectionnée comme ça:

jQuery('#theid option:selected').text()

13

Pour référence, il existe également un labelattribut secondaire sur la balise d'option:

//returns "GET THIS" when option is selected
$('#selecter :selected').attr('label'); 

HTML

<select id="selecter">
<option value="test" label="GET THIS">
Option (also called label)</option>
</select>

6

Pour obtenir le libellé d'une option spécifique dans une liste déroulante, vous pouvez taper ceci -

$('.class_of_dropdown > option[value='value_to_be_searched']').html();

ou

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();

3

J'ai trouvé cela utile

$('select[name=users] option:selected').text()

Lors de l'accès au sélecteur à l'aide du thismot - clé.

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


2

Essaye ça:

$('select option:selected').prop('label');

Cela extraira le texte affiché pour les deux styles d' <option>éléments:

  • <option label="foo"><option> -> "foo"
  • <option>bar<option> -> "bar"

S'il a à la fois un labelattribut et du texte à l'intérieur de l'élément, il utilisera l' labelattribut, qui est le même comportement que le navigateur.

Pour la postérité, cela a été testé sous jQuery 3.1.1


0
<SELECT id="sel" onmouseover="alert(this.options[1].text);"
<option value=1>my love</option>
<option value=2>for u</option>
</SELECT>


0

Dans les navigateurs modernes, vous n'avez pas besoin de JQuery pour cela. Utilisez plutôt

document.querySelectorAll('option:checked')

Ou spécifiez un élément DOM au lieu de document


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.