web-dev-qa-db-fra.com

jQuery obtenir le 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 souhaitais obtenir "Option B" lorsque la valeur "2" était sélectionnée?

Veuillez noter qu'il ne s'agit pas de demander comment obtenir la valeur textuelle sélectionnée, mais simplement l'une d'elles, sélectionnée ou non, en fonction de l'attribut value. J'ai essayé:

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

Mais ça ne fonctionne pas.

javascriptjquerydrop-down-menujquery-selectors
1202
Paolo Bergantino

Il recherche un élément avec id list qui possède une propriété value égal à 2. Ce que vous voulez, c'est l'enfant option du list.

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

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

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

Si vous souhaitez obtenir l’option choisie, utilisez

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

Cela fonctionnait parfaitement 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. Avec cela, j'ai pu créer une fonction dynamique qui fonctionne avec toutes mes boîtes de sélection pour lesquelles je souhaite obtenir les deux valeurs, la valeur d'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 plus ... était probablement un conflit avec un autre morceau de code ... de toute façon, la solution consistait à supprimer l’option du find () call:

$(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.

127
raphie

Basé sur le 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.

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

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

36
m3ct0n

  1. S'il n'y a qu'une seule étiquette de sélection sur la page, vous pouvez spécifier select à 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();
36
Beena Shetty

Essayez ce qui suit:

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

La raison pour laquelle votre fragment de code original ne fonctionnait pas est que vos balises OPTION sont des enfants de votre balise SELECT, qui a le idlist.

23
Andrew Moore

C’est une vieille question qui n’a pas été mise à jour depuis 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 ça aide :-)

19
mindmyweb
$(this).children(":selected").text()
17
Avinash Saini

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

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

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();
13
Dilipkumar63
$("#list [value='2']").text();

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

13
Mon

Pendant que vous "parcouriez" 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 - il était plutôt nul.

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 une .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.

10
eon

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();
});
8
Mary Daisy Sanchez

Je cherchais à obtenir val par nom de champ interne au lieu de ID et je venais de Google pour cet article qui m'aidait, mais je n'ai pas trouvé 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();
5
FAA

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

element.options[element.selectedIndex].text

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

4
Martin Clemens Bloch

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 obtient un texte de balise d'option spécifique et place une variable dynamique à la valeur

4
Alireza Fattahi

Comme solution alternative, vous pouvez également utiliser un partie du contexte du sélecteur jQuery pour rechercher le ou les éléments <option> avec value="2" dans la liste déroulante:

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

Je voulais une version dynamique pour select multiple 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>
2
gordon

Vous pouvez obtenir 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>
1
Anfath Hifans

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

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