jQuery ottiene il testo del tag opzione specifico

Va bene, dì che ho questo:

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

Come sarebbe il selettore se volessi ottenere "Opzione B" quando ho il valore "2"?

Si noti che ciò non richiede come ottenere il valore di testo selezionato , ma solo uno di essi, selezionato o meno, a seconda dell'attributo value. Provai:

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

Ma non sta funzionando.

Sta cercando un elemento con ID listche abbia una proprietà valueuguale a 2.
Quello che vuoi è il optionfiglio di list:

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

Se desideri ottenere l'opzione con un valore di 2, utilizza

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

Se desideri ottenere qualsiasi opzione sia attualmente selezionata, utilizza

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

Questo ha funzionato perfettamente per me, stavo cercando un modo per inviare due diversi valori con le opzioni generate da MySQL e quanto segue è generico e dinamico:

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

Come menzionato in uno dei commenti. Con questo sono stato in grado di creare una funzione dinamica che funziona con tutte le mie caselle di selezione che voglio ottenere entrambi i valori, il valore dell'opzione e il testo.

Pochi giorni fa ho notato che durante l'aggiornamento di jQuery dalla 1.6 alla 1.9 del sito ho usato questo codice, questo smette di funzionare ... probabilmente era un conflitto con un altro pezzo di codice ... comunque, la soluzione era rimuovere l'opzione dal find () chiama:

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

Questa era la mia soluzione ... usala solo se hai qualche problema dopo l'aggiornamento di jQuery.

Sulla base dell'HTML originale pubblicato da Paolo, ho realizzato quanto segue.

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

È stato testato per funzionare su Internet Explorer e Firefox.

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

per più valori selezionati #listnell'elemento.

1. Se nella pagina è presente un solo tag select, puoi specificare select all'interno dell'id 'list'

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

2. Per ottenere il testo selezionato

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

Prova quanto segue:

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

Il motivo per cui il tuo frammento originale non funzionava è perché i tuoi OPTIONtag sono figli del tuo SELECTtag, che ha il id list.

Questa è una vecchia domanda che non è stata aggiornata da qualche tempo il modo corretto di fare ora sarebbe usare

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

Spero che questo possa essere d'aiuto :-)

Volevo ottenere l'etichetta selezionata. Questo ha funzionato per me in jQuery 1.5.1.

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

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

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

lasciare uno spazio dopo il selettore ID.

È possibile ottenere il testo dell'opzione selezionata utilizzando la funzione .text();

puoi chiamare la funzione in questo modo:

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

Durante la "ripetizione ciclica" degli elementi selezionati creati dinamicamente con un .each (function () ...): $("option:selected").text();e $(this + " option:selected").text()non ha restituito il testo dell'opzione selezionata, invece era nullo.

Ma la soluzione di Peter Mortensen ha funzionato:

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

Non so perché il solito modo non riesca in un .each()(probabilmente il mio errore), ma grazie, Peter. So che non era la domanda originale, ma la sto citando "per i neofiti che arrivano su Google".

Avrei iniziato con l' $('#list option:selected").each()eccezione che dovevo prendere anche roba dall'elemento select.

Uso:

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

Stavo cercando val per nome campo interno anziché ID e venivo da google a questo post che mi ha aiutato ma non ho trovato la soluzione di cui ho bisogno, ma ho trovato la soluzione ed eccola qui:

Quindi questo potrebbe aiutare qualcuno a cercare il valore selezionato con il nome interno del campo invece di usare l'id lungo per gli elenchi di SharePoint:

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

Avevo bisogno di questa risposta dato che avevo a che fare con un oggetto cast dinamico, e gli altri metodi qui non sembravano funzionare:

element.options[element.selectedIndex].text

Questo ovviamente usa l' oggetto DOM invece di analizzare il suo HTML con nodeValue, childNodes, ecc.

Un consiglio: puoi usare il codice seguente se il tuo valore è dinamico:

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

O (stile migliore)

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

Come menzionato in jQuery, ottieni il testo del tag opzione specifico e posiziona la variabile dinamica sul valore

Come soluzione alternativa, puoi anche utilizzare una parte contestuale del selettore jQuery per trovare gli <option>elementi value="2"all'interno dell'elenco a discesa:

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

Volevo una versione dinamica per selezionare multipli che mostrasse ciò che è selezionato a destra (vorrei aver letto e visto $(this).find... prima):

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

È possibile ottenere uno dei seguenti modi

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