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

Respostas:


120

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

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


101
 $(this).find('option:selected').text();

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

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



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

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/


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


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.