jQuery obtenir de l'option spécifique à la balise de texte

très bien, dites 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>

A quoi ressemblerait le sélecteur si je voulais obtenir" Option B "alors que j'ai la valeur "2"?

veuillez noter que ceci ne demande pas comment obtenir la valeur sélectionnée , mais n'importe laquelle d'entre elles, qu'elle soit sélectionnée ou non, selon l'attribut de valeur. J'ai essayé:

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

mais ça ne marche pas.

1149
demandé sur ArtOfWarfare 2008-10-13 08:06:34
la source

20 ответов

il cherche un élément avec id list qui a une propriété value égale à 2. Ce que vous voulez, c'est le option enfant du list .

$("#list option[value='2']").text()
1062
répondu nickf 2008-10-13 08:08:03
la source

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();
1248
répondu ArtOfWarfare 2013-12-30 20:01:21
la source

cela a fonctionné 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 le jQuery de 1.6 à 1.9 du site que j'ai utilisé ce code, cela cesse de fonctionner... c'était probablement un conflit avec un autre morceau de code... quoi qu'il en soit, la solution était de supprimer l'option de l'appel find ():

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

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

119
répondu raphie 2016-11-29 19:15:44
la source

basé sur le HTML original posté par Paolo je suis venu avec ce qui suit.

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

il a été testé pour travailler sur Internet Explorer et Firefox.

107
répondu asyadiqin 2011-05-25 13:44:38
la source
$("#list option:selected").each(function() {
   alert($(this).text());
});  

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

36
répondu m3ct0n 2011-09-23 17:40:19
la source
  1. S'il n'y a qu'une balise select sur la page, alors vous pouvez spécifier select à l'intérieur de id 'list '

    jQuery("select option[value=2]").text();
    
  2. pour obtenir le texte sélectionné

    jQuery("select option:selected").text();
    
36
répondu Beena Shetty 2016-08-19 06:27:02
la source

essayez ce qui suit:

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

la raison pour laquelle votre fragment original ne fonctionnait pas est que vos étiquettes OPTION sont des enfants de votre étiquette SELECT , qui a le id list .

23
répondu Andrew Moore 2008-10-13 08:08:45
la source

C'est une vieille Question qui n'a pas été mise à jour dans un certain temps la bonne façon de le faire maintenant serait d'utiliser

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

j'espère que cela aide :-)

19
répondu mindmyweb 2015-04-17 19:37:28
la source
$(this).children(":selected").text()
17
répondu Avinash Saini 2013-04-03 15:21:19
la source

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

$("#list :selected").text();
16
répondu Dilantha 2011-05-25 13:42:40
la source
$("#list [value='2']").text();

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

13
répondu Mon 2010-06-08 15:29:44
la source

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();
12
répondu Dilipkumar63 2017-03-02 13:49:56
la source

pendant que" looping " à travers les éléments de sélection créés dynamiquement avec un .chaque (fonction ()...): $("option:selected").text(); et $(this + " option:selected").text() n'a pas renvoyé de l'option sélectionnée texte - à 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 dans un .each() (probablement ma propre erreur), mais merci, Peter. Je sais que ce n'était pas la question originale, mais je le mentionne "pour les débutants à venir par le biais de Google."

j'aurais commencé avec $('#list option:selected").each() sauf que j'ai eu besoin de saisir des choses de l'élément select aussi bien.

9
répondu eon 2011-05-26 23:04:13
la source

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();
});
8
répondu Mary Daisy Sanchez 2012-06-11 20:06:20
la source

je cherchais à obtenir val par nom de champ interne au lieu de ID et est venu de google à ce post qui aide mais n'a pas trouvé la solution dont j'ai besoin, mais j'ai obtenu la solution et voici:

ainsi cela pourrait aider quelqu'un à la recherche de la valeur sélectionnée avec le Nom interne du champ au lieu d'utiliser le long id pour les listes de SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 
5
répondu FAA 2013-11-06 01:57:29
la source

j'avais besoin de cette réponse car je m'occupais d'un objet moulé dynamiquement, et les autres méthodes ici ne semblaient pas fonctionner:

element.options[element.selectedIndex].text

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

4
répondu Martin Clemens Bloch 2013-02-19 01:50:55
la source

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

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

Ou, encore mieux, de style)

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

, Comme mentionné dans jQuery obtenir de l'option spécifique à la balise de texte et en plaçant la variable dynamique de la valeur

4
répondu Alireza Fattahi 2017-05-23 15:18:30
la source

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

$("option[value='2']", "#list").text();
3
répondu VisioN 2013-01-20 18:57:54
la source

je voulais une version dynamique pour select multiple qui afficherait ce qui est sélectionné à droite (j'aurais aimé lire sur 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
répondu gordon 2012-06-11 20:08:14
la source

vous pouvez obtenir 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>
0
répondu Anfath Hifans 2018-05-08 12:57:02
la source