Jak uzyskać $ (tę) wybraną opcję w jQuery?

91

Poniższy kod działa:

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

Jak refaktoryzować drugą linię, aby:

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

Do czego używasz ***option-selected***?

B Seven
źródło

Odpowiedzi:

120

Dla wybranej wartości: $(this).val()

Jeśli potrzebujesz wybranego elementu opcji, $("option:selected", this)

jorgebg
źródło
105
 $(this).find('option:selected').text();
user56reinstatemonica8
źródło
To zadziałało idealnie dla mnie - próbowałem, $("option:selected", this)jak wspomniano powyżej, ale to było problematyczne. Używałem kliknięcia przycisku, aby dołączyć wybrany tekst elementu opcji do innego elementu div, ale kiedy kliknąłem przycisk, faktycznie zmieniło to wybrany element ... dziwne. Użyj tego.
skwidbreth
53

Moim zdaniem najlepszy i najkrótszy sposób na zdarzenia zmiany na liście rozwijanej, aby uzyskać wybraną opcję:

$('option:selected',this);

aby uzyskać atrybut value:

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

aby uzyskać pokazaną część między tagami:

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

W twojej próbce:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});
angelmedia
źródło
Nie używaj .context, jest przestarzały od wersji jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx
Tak, ale masz na myśli to: api.jquery.com/context $ ("ul", document.body) .context.nodeName, którego nie używam
angelmedia
1
Podoba mi się odpowiedź, ale dlaczego jest najlepsza?
Sébastien Gicquel
40
var cur_value = $('option:selected',this).text();
Satyam Khatri
źródło
Chociaż może to teoretycznie odpowiedzieć na pytanie, lepiej byłoby zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia.
Enamul Hassan
13

To powinno działać:

$(this).find('option:selected').text();
On Shiming
źródło
Taka sama odpowiedź jak powyżej
Hugh Seagraves
1
Opublikowane w ciągu tej samej minuty!
lharby
9

Możesz użyć finddo wyszukania wybranej opcji, która jest potomkiem węzłów wskazanych przez bieżący obiekt jQuery:

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

Ponieważ jest to prawdopodobnie najbliższe dziecko, sugerowałbym użycie .childrenzamiast tego:

var cur_value = $(this).children('option:selected').text();
Platinum Azure
źródło
7
var cur_value = $(this).find('option:selected').text();

Ponieważ optionprawdopodobnie selectjesteś bezpośrednim dzieckiem , możesz również użyć:

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

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

thomthom
źródło
Gdzie otrzymujesz option-selectedbez cytatów ...?
Platinum Azure
To była literówka, kiedy pisałem. Poprawiono odpowiedź.
thomthom
find('option:selected')zwraca dla mnie pusty ciąg. Jaka wersja jQuery jest wymagana? Pracuję w 1.6.1. children('option:selected')działa.
B Seven
option:selectedjest tam od wersji 1.0 api.jquery.com/selected-selector
thomthom
0

Najlepsze przypuszczenie:

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

W tym przypadku bardziej lubię dzieci, ponieważ wiesz, że idziesz tylko o jedną gałąź w dół drzewa DOM ...

Likwid_T
źródło
Może tak naprawdę miałeś na myśli var cur_value = $ (this) .children ('opcja: wybrane'). Text ();
Joe Johnston
0

To poprostu

$(this).val();

Myślę, że jQuery jest wystarczająco sprytny, aby wiedzieć, czego potrzebujesz

Edmund Adjei
źródło