jQuery obtenir le texte de balise d'option spécifique

Question

Très bien, dis que j'ai ceci:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

À quoi ressemblerait le sélecteur si je souhaitais obtenir & "Option B &"; quand j'ai la valeur '2'?

Notez que cela ne vous demande pas comment obtenir la valeur textuelle sélectionnée , mais simplement l’un d’eux, qu’il soit sélectionné ou non, en fonction de l’attribut value. J'ai essayé:

$("#list[value='2']").text();

Mais cela ne fonctionne pas.

Answer 1

Il recherche un élément dont l'identifiant list a une propriété value égale à 2. Ce que vous voulez, c'est option l'enfant du <=>.

$("#list option[value='2']").text()

Answer 2

Si vous souhaitez obtenir l'option avec une valeur de 2, utilisez

$("#list option[value='2']").text();

Si vous souhaitez obtenir l'option choisie actuellement, utilisez

$("#list option:selected").text();

Answer 3

Cela a parfaitement fonctionné pour moi. Je cherchais un moyen d'envoyer deux valeurs différentes avec les options générées par MySQL. Le texte suivant est générique et dynamique:

$(this).find("option:selected").text();

Comme mentionné dans l'un des commentaires. Grâce à cela, j'ai pu créer une fonction dynamique qui fonctionne avec toutes les boîtes de sélection pour lesquelles je souhaite obtenir les deux valeurs, la valeur de l'option et le texte.

Il y a quelques jours, j’ai remarqué que lors de la mise à jour de jQuery de 1,6 à 1,9 du site, j’utilisais ce code, cela ne fonctionnait pas ... était probablement un conflit avec un autre morceau de code ... de toute façon, la solution consistait à supprimer option de l'appel find ():

$(this).find(":selected").text();

C’était ma solution ... ne l’utilisez que si vous rencontrez un problème après la mise à jour de votre jQuery.

Answer 4

Sur la base du code HTML original posté par Paolo, j'ai proposé ce qui suit.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Il a été testé pour fonctionner sur Internet Explorer et Firefox.

Answer 5

$("#list option:selected").each(function() {
   alert($(this).text());
});  

pour plusieurs valeurs sélectionnées dans l'élément #list.

Answer 6

1. S'il n'y a qu'une seule étiquette de sélection sur la page, vous pouvez spécifier l'intérieur de l'id 'list'

   jQuery("select option[value=2]").text();
   

2. Pour obtenir le texte sélectionné

   jQuery("select option:selected").text();
   

Answer 7

Essayez ce qui suit:

$("#list option[value=2]").text();

La raison pour laquelle votre extrait de code original ne fonctionnait pas, c'est parce que vos balises OPTION sont des enfants de votre balise SELECT, qui comporte le id list.

.

Answer 8

C’est une vieille question qui n’a pas été mise à jour depuis un certain temps. La bonne façon de procéder est d’utiliser

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

J'espère que cela vous aidera: -)

Answer 9

$(this).children(":selected").text()

Answer 10

Je voulais obtenir l'étiquette sélectionnée. Cela a fonctionné pour moi dans jQuery 1.5.1.

$("#list :selected").text();

Answer 11

$("#list [value='2']").text();

laissez un espace après le sélecteur d'identifiant.

Answer 12

Vous pouvez obtenir le texte de l'option sélectionnée à l'aide de la fonction .text();

vous pouvez appeler la fonction comme ceci:

jQuery("select option:selected").text();

Answer 13

En " en boucle " via des éléments de sélection créés dynamiquement avec un .each (fonction () ...): $("option:selected").text(); et $(this + " option:selected").text() n’ont pas renvoyé le texte de l’option sélectionnée; au lieu de cela, il était null.

Mais la solution de Peter Mortensen a fonctionné:

$(this).find("option:selected").text();

Je ne sais pas pourquoi la méthode habituelle ne réussit pas dans un .each() (probablement ma propre erreur), mais merci, Peter. Je sais que ce n'était pas la question initiale, mais je le mentionne & "Pour les débutants qui passent par Google. &";

J'aurais commencé avec $('#list option:selected").each() sauf que je devais également récupérer des éléments de l'élément select.

Answer 14

Utiliser:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});

Answer 15

Je cherchais à obtenir val par nom de champ interne plutôt que par ID et je viens de google pour ce message qui aide mais ne trouve pas la solution dont j'ai besoin, mais j'ai la solution et la voici:

Cela pourrait donc aider quelqu'un à rechercher une valeur sélectionnée avec un nom interne de champ au lieu d'utiliser un long identifiant pour les listes SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 

Answer 16

J'avais besoin de cette réponse car je traitais avec un objet à la distribution dynamique, et les autres méthodes présentées ici ne semblaient pas fonctionner:

element.options[element.selectedIndex].text

Cela utilise bien sûr l’objet DOM au lieu d'analyser son code HTML avec nodeValue, childNodes, etc. .

Answer 17

Un conseil: vous pouvez utiliser le code ci-dessous si votre valeur est dynamique:

$("#list option[value='"+aDynamicValue+"']").text();

Ou (meilleur style)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Comme indiqué dans jQuery obtient un texte de balise d'option spécifique et place une variable dynamique à la valeur

Answer 18

Comme solution alternative, vous pouvez également utiliser une partie du contexte du sélecteur jQuery pour rechercher <option> élément (s) avec value="2" dans la liste déroulante:

$("option[value='2']", "#list").text();

Answer 19

Je voulais une version dynamique pour sélectionner plusieurs éléments qui afficherait ce qui est sélectionné à droite (j'aimerais lire et voir $(this).find ... plus tôt):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Answer 20

Vous pouvez utiliser l’un des moyens suivants

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Answer 21

Si vous voulez obtenir la valeur sélectionnée, alors:

$("#list option:selected").text();