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


1234

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.


Pour cette période, utilisez:$("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
tour

Réponses:


1122

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

4
Merci pour ce nickf. Voici cette réponse développée si vous voulez obtenir la valeur dynamiquement: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# option de liste [valeur =" + selectValue + "]"). text (); /// bon exemple nickf.
Kevin Florida

283
@Kevin, dans ce cas, vous pouvez utiliser la réponse ci-dessous. $('#list option:selected').text()
nickf le

6
@nickf, et plus simple,$('#list').val()
Derek 朕 會 功夫

36
@Derek, val () ne donnera pas le texte de l'option, il donnera sa valeur, ce qui dans certains cas (beaucoup j'ose dire) n'est pas le même.
itsmequinn

vous devez toujours utiliser .trim()après .text()car certains navigateurs peuvent ajouter parfois des espaces avant et après le texte qui sont invisibles pour l'utilisateur mais peuvent conduire à des valeurs erronées$("#list option[value='2']").text().trim()
Hassan ALAMI

1262

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

11
Pour obtenir la valeur au lieu du texte, vous devrez écrire: - $ ("select # list"). Val (); Je sais que ce n'est pas la vraie réponse à la question posée, mais j'ai quand même pensé à mentionner ce point pour les débutants venant de Google.
Knowledge Craving

J'utilise $ ("# list option: selected"). Text () and $ ("# list option: selected"). Attr ('value')
fullstacklife

Pour obtenir le texte sélectionné (même si la question ne le demandait pas spécifiquement), cette méthode est supérieure car elle ne doit pas connaître la valeur sélectionnée.
theJerm

132

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.


2
soi-disant c'est le moyen le plus efficace de le faire selon WebStorm 8.
dbinott

2
Bien que cette réponse soit perspicace et m'a aidée à résoudre un problème que je rencontrais, il ne répond pas correctement à la question: veuillez noter qu'il ne s'agit pas de savoir comment obtenir la valeur de texte sélectionnée, mais juste n'importe laquelle d'entre elles, qu'elle soit sélectionnée ou non, selon l'attribut value.
StubbornShowaGuy

109

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.


11
Une alternative à ceci est: $ ("option: selected", this) .text ()
Doug S

C'est une meilleure réponse car elle tient compte de scénarios complexes et pas seulement de HTML statique et de simples événements Javascript.
satisfaisant

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

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


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

24

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.


19

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 :-)


Ce n'est certainement pas correct Veuillez noter que cela ne demande pas comment obtenir la valeur de texte sélectionnée
Wesley Smith

17

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

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

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

Malheureusement, cela ne fonctionne pas lorsque vous avez un optgrouptag en tant qu'enfant de votre selectet l'option sélectionnée est là-dedans optgroup. utilisation $("#list option:selected").text();qui fonctionne même dans ce cas
MartinM

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

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


13

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

10

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.


8

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

5

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

Solution solide. Désolé, c'est dans un endroit si secret ici. Vous voudrez peut-être trouver un endroit plus important pour fournir cette solution. Peut-être pourriez-vous poser et répondre à votre propre question?
Andrew Kozak

4

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.




2

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>

2

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>

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.