Ottieni il testo selezionato da un elenco a discesa (casella di selezione) utilizzando jQuery


2302

Come posso ottenere il testo selezionato (non il valore selezionato) da un elenco a discesa in jQuery?


12
Solo i miei due centesimi: un menu a discesa "ASP" non è speciale; è solo un buon vecchio HTML. :-)
ankush981

Si può fare riferimento a questo articolo: javascriptstutorial.com/blog/…
Dilip Kumar Yadav,

per la vaniglia modo javascript, vedere stackoverflow.com/a/5947/32453
rogerdpack

Solo $ (questo) .prop ('selezionato', vero); ha sostituito .att in .prop ha funzionato per tutti i browser
Shahid Hussain Abbasi

Risposte:


3773
$("#yourdropdownid option:selected").text();

207
Penso che questo dovrebbe essere $("#yourdropdownid").children("option").filter(":selected").text()poiché is () restituisce un valore booleano se l'oggetto corrisponde al selettore o meno.
MHollis,

42
In secondo luogo il commento su è () che restituisce un valore boolen; in alternativa, usa la seguente piccola modifica: $ ('# yourdropdownid'). children ("opzione: selezionata"). text ();
scubbo,

25
@ DT3 testato is("selected").text()restituisce aTypeError: Object false has no method 'text'
ianace il

96
$('select').children(':selected')è il modo più veloce: jsperf.com/get-selected-option-text
Simon

3
$ ("# IdSelect"). Children ("opzione: selezionata"). Text ()
JD - DC TECH

266

Prova questo:

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

Per un menu a discesa ASP.NET è possibile utilizzare il seguente selettore:

$("[id*='MyDropDownId'] :selected")

La versione ASP.NET qui è l'unica Jquery che funziona con asp.net per me, quindi acconsento a quella. Questo: ( '$ ("# opzione yourdropdownid: selezionato"). Text ();' non ha funzionato in una pagina asp.net usando una pagina master.
netfed

5
non funziona perché le pagine mastro asp.net generano caratteri casuali davanti al selettore. È tecnicamente alla ricerca di qualcosa di simile("#ct0001yourdropdownid)
CSharper


1
@CSharper - Penso che dire ASP.NET che lancia caratteri casuali sia piuttosto fuorviante. Non sono affatto casuali, sono strutturali e seguono regole rigorose (basate su cose come se metti un IDcontrollo sul tuo controllo e, in caso contrario, basato sull'indice di dove si verificano nell'attuale livello dell'albero, ecc. )
caduta libera

Salve come si fa all'interno di una riga / cella della tabella, come si fa a sapere quale dei menu a discesa dalla tabella, in particolare in ASP MVC 5
trasformatore

215

Le risposte pubblicate qui, ad esempio,

$('#yourdropdownid option:selected').text();

non ha funzionato per me, ma questo ha fatto:

$('#yourdropdownid').find('option:selected').text();

È probabilmente una versione precedente di jQuery.


7
Non odiare questa risposta. L'uso della parola chiave "trova" mi ha aiutato. Venivo da un contesto completamente diverso.
ROFLwTIME

5
non hai affatto bisogno della parte dell'opzione come implica con la selezione ... semplicemente usando $ ('# yourdropdownid: selected'). text (); funzionerà benissimo
Dss il

jquery-1.10.2.min, questo ha funzionato per me, non per altri.
Kubilay,

La risposta popolare funziona, ma ne avevo bisogno su un riferimento già ottenuto alla selezione, quindi questa è la risposta migliore per me
Graham,


67

Questo funziona per me

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

Se l'elemento è stato creato in modo dinamico

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});

64
$("option:selected", $("#TipoRecorde")).text()

55

$("#DropDownID").val() darà il valore dell'indice selezionato.


37
Non è esattamente la risposta alla domanda, ma è stata utile per me. La domanda vuole il testo selezionato.
Peter,

54

Questo funziona per me:

$('#yourdropdownid').find('option:selected').text();

Versione jQuery : 1.9.1


3
Questo ha funzionato per me, perché changesull'evento ora posso usare $(this).find('option:selected').text()per ottenere testo.
Timo002,

$(this).children(':selected').text()funzionerebbe anche. @ Timo002
Mr. Mak

42

Per il testo dell'elemento selezionato, utilizzare:

$('select[name="thegivenname"] option:selected').text();

Per il valore dell'elemento selezionato, utilizzare:

$('select[name="thegivenname"] option:selected').val();

33

Vari modi

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();

31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

questo è quello che mi aspettavo $(this) dopo la mia chiamata ajax
Shantaram Tupe

Puoi anche fare $ ("opzione: selezionata", questa) .text () senza racchiuderla in un oggetto JQuery.
Doug F

28

Usa questo

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;   

Quindi ottieni il valore e il testo selezionati all'interno selectedValuee selectedText.


1
Eseguito l'upgrade perché questa è l'unica risposta che non utilizza jQuery.
Justin Lessard,

Sono innamorato di vanilla js. Grazie mille per questo
Enrique Bermúdez,

27
var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

Questo ti aiuterà a ottenere la giusta direzione. Il codice sopra è completamente testato se hai bisogno di ulteriore aiuto fammi sapere.


19

Per coloro che utilizzano elenchi di SharePoint e non vogliono utilizzare l'id generato a lungo, questo funzionerà:

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

17
 $("#selectID option:selected").text();

Invece di #selectIDte puoi usare qualsiasi selettore jQuery, come .selectClassusare la classe.

Come menzionato nella documentazione qui .

Il selettore: selezionato funziona per gli elementi <opzione>. Non funziona per caselle di controllo o ingressi radio; usare :checkedper loro.

.text () Come da documentazione qui .

Ottieni i contenuti di testo combinati di ciascun elemento nel set di elementi corrispondenti, inclusi i loro discendenti.

Quindi puoi prendere il testo da qualsiasi elemento HTML usando il .text()metodo

Consultare la documentazione per una spiegazione più approfondita.



13

Per ottenere il valore selezionato usare

$('#dropDownId').val();

e per ottenere il testo dell'articolo selezionato utilizzare questa riga:

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

12
$('#id').find('option:selected').text();

11

Seleziona Testo e valore selezionato nel menu a discesa / seleziona modifica evento in jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})

10

Prova semplicemente il seguente codice.

var text= $('#yourslectbox').find(":selected").text();

restituisce il testo dell'opzione selezionata.


9

Uso:

('#yourdropdownid').find(':selected').text();


8

per me ha funzionato:

$.trim($('#dropdownId option:selected').html())

1
Nota: non utilizzarlo per la selezione multipla. Afferra solo il primo valore selezionato.
max


7

In caso di fratelli

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()

7

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

Fare clic per visualizzare la schermata OutPut


Ciao come fai all'interno di una riga / cella di una tabella , come fai a sapere quale menu a discesa dalla tabella? Sto cercando di effettuare una chiamata Ajax per recuperare e popolare i valori, posso farlo all'esterno in una pagina, ma non all'interno della riga della tabella ... puoi aggiungere qualche aiuto per favore
trasformatore


4

Se si desidera il risultato come elenco, utilizzare:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})

2
$("#dropdown").find(":selected").text();


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

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

$("#dropdown").children(":selected").text();

spiega perché avrebbe funzionato
jwenting il

2

Questo codice ha funzionato per me.

$("#yourdropdownid").children("option").filter(":selected").text();
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.