Como obter $ (this) opção selecionada no jQuery?

91

O seguinte código funciona:

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

Como refatorar a segunda linha para:

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

Para que você usa ***option-selected***?

B Seven
fonte

Respostas:

120

Para o valor selecionado: $(this).val()

Se você precisar do elemento de opção selecionado, $("option:selected", this)

Jorgebg
fonte
101
 $(this).find('option:selected').text();
user56reinstatemonica8
fonte
Isso funcionou perfeitamente para mim - tentei $("option:selected", this)conforme mencionado acima, mas foi problemático. Eu estava usando um clique de botão para anexar o texto do elemento de opção selecionado a outro div, mas quando cliquei no botão, ele realmente mudou o elemento selecionado ... estranho. Use este.
skwidbreth
53

Na minha opinião, o melhor e mais curto caminho para eventos onchange no menu suspenso para obter a opção selecionada:

$('option:selected',this);

para obter o atributo value:

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

para obter a parte mostrada entre as tags:

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

Em sua amostra:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});
angelmedia
fonte
Não use .context, ele está obsoleto desde jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx
Sim, mas o que você quer dizer é: api.jquery.com/context $ ("ul", document.body) .context.nodeName que eu não uso
angelmedia
1
Gosto da resposta, mas por que é a melhor?
Sébastien Gicquel
39
var cur_value = $('option:selected',this).text();
Satyam Khatri
fonte
Embora isso possa teoricamente responder à pergunta, seria preferível incluir as partes essenciais da resposta aqui e fornecer o link para referência.
Enamul Hassan,
12

Isso deve funcionar:

$(this).find('option:selected').text();
He Shiming
fonte
Mesma resposta que acima
Hugh Seagraves
1
Postado no mesmo minuto!
lharby
9

Você pode usar findpara procurar a opção selecionada que é descendente do (s) nó (s) apontado (s) pelo objeto jQuery atual:

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

Uma vez que este é provavelmente um filho imediato, eu sugeriria usar em seu .childrenlugar:

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

Como optioné provável que seja filho imediato de selectvocê, você também pode usar:

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

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

thomthom
fonte
Onde você começa option-selectedsem aspas ...?
Platinum Azure
Foi um erro de digitação quando postei. Corrigiu a resposta.
thomthom
find('option:selected')retorna uma string vazia para mim. Qual versão do jQuery é necessária? Estou trabalhando em 1.6.1. children('option:selected')funciona.
B Sete
option:selectedestá lá desde v1.0 api.jquery.com/selected-selector
thomthom
0

Melhor chute:

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

Eu gosto mais de crianças neste caso porque você sabe que só vai um galho abaixo da árvore DOM ...

Likwid_T
fonte
Talvez o que você realmente quis dizer foi var cur_value = $ (this) .children ('option: selected'). Text ();
Joe Johnston
0

É apenas

$(this).val();

Acho que jQuery é inteligente o suficiente para saber o que você precisa

Edmund Adjei
fonte