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

D'accord, 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 voulais obtenir "Option B" quand j'ai la valeur '2'?

Veuillez noter qu'il ne s'agit pas de savoir comment obtenir la valeur de texte sélectionnée , mais de n'importe lequel d'entre eux, qu'il soit sélectionné ou non, selon l'attribut value. J'ai essayé:

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

Mais ça ne marche pas.

Il recherche un élément avec id listqui a une propriété valueégale à 2.
Ce que vous voulez, c'est l' optionenfant du list:

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

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

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

Si vous souhaitez obtenir l'option actuellement sélectionnée, utilisez

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

Cela fonctionnait parfaitement pour moi, je cherchais un moyen d'envoyer deux valeurs différentes avec des options générées par MySQL, et ce qui suit est générique et dynamique:

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

Comme mentionné dans l'un des commentaires. Avec cela, j'ai pu créer une fonction dynamique qui fonctionne avec toutes mes boîtes de sélection que je veux obtenir à la fois les 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'ai utilisé ce code, cela ne fonctionnait plus ... c'était probablement un conflit avec un autre morceau de code ... de toute façon, la solution était de supprimer l'option du find () appel:

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

C'était ma solution ... utilisez-la uniquement si vous avez un problème après avoir mis à jour votre jQuery.

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

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

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

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

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

1. S'il n'y a qu'une seule balise select sur la page, vous pouvez spécifier select inside of id 'list'

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

2. Pour obtenir le texte sélectionné

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

Essayez ce qui suit:

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

La raison pour laquelle votre extrait d'origine ne fonctionnait pas est que vos OPTIONbalises sont des enfants de votre SELECTbalise, qui contient le id list.

Il s'agit d'une ancienne question qui n'a pas été mise à jour depuis un certain temps. La façon correcte de le faire maintenant serait d'utiliser

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

J'espère que ça aide :-)

Je voulais obtenir le label sélectionné. Cela a fonctionné pour moi dans jQuery 1.5.1.

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

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

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

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

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

vous pouvez appeler la fonction comme ceci:

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

Pendant le "bouclage" à travers des éléments de sélection créés dynamiquement avec un .each (fonction () ...): $("option:selected").text();et$(this + " option:selected").text() n'a pas renvoyé le texte de l'option sélectionnée - à la place, il était nul.

Mais la solution de Peter Mortensen a fonctionné:

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

Je ne sais pas pourquoi la manière habituelle ne réussit pas .each()(probablement ma propre erreur), mais merci, Peter. Je sais que ce n'était pas la question d'origine, mais je le mentionne "pour les débutants venant de Google".

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

Utilisation:

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();
});

Je cherchais à obtenir val par nom de champ interne au lieu d'ID et je suis venu de google à ce poste qui m'a aidé mais n'a pas trouvé la solution dont j'ai besoin, mais j'ai obtenu la solution et la voici:

Ainsi, cela pourrait aider quelqu'un à rechercher la valeur sélectionnée avec le nom interne du champ au lieu d'utiliser un identifiant long pour les listes SharePoint:

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

J'avais besoin de cette réponse car j'avais affaire à un objet casté dynamiquement, et les autres méthodes ici ne semblaient pas fonctionner:

element.options[element.selectedIndex].text

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

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 mentionné dans jQuery, obtenez un texte de balise d'option spécifique et placez une variable dynamique sur la valeur

Comme solution alternative, vous pouvez également utiliser une partie contextuelle du sélecteur jQuery pour rechercher des <option>éléments value="2"dans la liste déroulante:

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

Je voulais une version dynamique pour sélectionner plusieurs qui afficherait ce qui est sélectionné à droite (j'aurais aimé 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>

Vous pouvez obtenir l'une des méthodes suivantes

$("#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>