Wie bekomme ich $ (diese) ausgewählte Option in jQuery?

91

Der folgende Code funktioniert:

$("#select-id").change(function(){
  var cur_value = $('#select-id option:selected').text();
  . . .
});

So überarbeiten Sie die zweite Zeile an:

var cur_value = $(this).***option-selected***.text();

Wofür benutzt du ***option-selected***?

javascript jquery B Sieben
quelle

Antworten:

120

Für den ausgewählten Wert: $(this).val()

Wenn Sie das ausgewählte Optionselement benötigen, $("option:selected", this)

jorgebg
quelle
101 
 $(this).find('option:selected').text();
user56reinstatemonica8
quelle
Das hat bei mir perfekt funktioniert - ich habe es $("option:selected", this)wie oben erwähnt versucht , aber das war problematisch. Ich habe einen Schaltflächenklick verwendet, um den Text des ausgewählten Optionselements an ein anderes Div anzuhängen, aber als ich auf die Schaltfläche geklickt habe, hat sich das ausgewählte Element tatsächlich geändert ... seltsam. Verwende das hier.
Skwidbreth
53

Meiner Meinung nach der beste und kürzeste Weg für Onchange-Ereignisse in der Dropdown-Liste, um die ausgewählte Option zu erhalten:

$('option:selected',this);

um das Wertattribut zu erhalten:

$('option:selected',this).attr('value');

So erhalten Sie den angezeigten Teil zwischen den Tags:

$('option:selected',this).text();

In Ihrer Stichprobe:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});
Angelmedia
quelle
Nicht verwenden .context, es ist veraltet seit jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx
Ja, aber was du meinst ist folgendes: api.jquery.com/context $ ("ul", document.body) .context.nodeName, den ich nicht benutze
angelmedia
1
Ich mag die Antwort, aber warum ist es am besten?
Sébastien Gicquel
39 
var cur_value = $('option:selected',this).text();
Satyam Khatri
quelle
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
Enamul Hassan
12

Das sollte funktionieren:

$(this).find('option:selected').text();
Er Shiming
quelle
Gleiche Antwort wie oben
Hugh Seagraves
1
Gepostet innerhalb der gleichen Minute!
lharby
9

Sie können findnach der ausgewählten Option suchen, die ein Nachkomme der Knoten ist, auf die das aktuelle jQuery-Objekt zeigt:

var cur_value = $(this).find('option:selected').text();

Da dies wahrscheinlich ein unmittelbares Kind ist, würde ich tatsächlich vorschlagen, .childrenstattdessen Folgendes zu verwenden :

var cur_value = $(this).children('option:selected').text();
Platinum Azure
quelle
7 
var cur_value = $(this).find('option:selected').text();

Da optionist wahrscheinlich unmittelbares Kind von selectIhnen kann auch verwendet werden:

var cur_value = $(this).children('option:selected').text();

http://api.jquery.com/find/

thomthom
quelle
Woher bekommst du option-selectedohne Anführungszeichen ...?
Platinum Azure
Das war ein Tippfehler, als ich gepostet habe. Die Antwort wurde korrigiert.
Thomthom
find('option:selected')gibt eine leere Zeichenfolge für mich zurück. Welche Version von jQuery wird benötigt? Ich arbeite in 1.6.1. children('option:selected')funktioniert.
B sieben
option:selectedist seit v1.0 da api.jquery.com/selected-selector
thomthom
0

Beste Annahme:

var cur_value = $('#select-id').children('option:selected').text();

In diesem Fall mag ich Kinder besser, weil Sie wissen, dass Sie nur einen Ast im DOM-Baum entlang gehen ...

Likwid_T
quelle
Vielleicht meinten Sie wirklich var cur_value = $ (this) .children ('option: selected'). Text ();
Joe Johnston
0

Es ist nur

$(this).val();

Ich denke, jQuery ist klug genug, um zu wissen, was Sie brauchen

Edmund Adjei
quelle