jquery select change event opção selecionada

235

Liguei um evento no evento de mudança dos meus elementos selecionados com isso:

$('select').on('change', '', function (e) {

});

Como acessar o elemento que foi selecionado quando o evento de alteração ocorre?

jquery events

— Zulakis
fonte

1

Por que você diz isso?

— Miguel

3

@superuberduper Evitei o jquery o máximo que pude, mas a resistência é inútil. Você se sentirá muito melhor depois de ter sido assimilado.

— adg

lolol @adg tão bom!

— SuperUberDuper

461

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

— Naftali tcp Neal
fonte

8

O que significa a sintaxe $ ("seletor", isso)? Eu tenho uma idéia geral, mas eu não estou totalmente certo

— JoshWillik

14

@ JoshWillik com $("selector", this)você está encontrando todos os selectorelementos dentro thisdo contexto. Escrever $("selector", this)é quase o mesmo que $(this).find('selector')

— Bellash

8

@ JoshWillik: como $()é um alias de jQuery(), você pode encontrar a documentação aqui: api.jquery.com/jQuery A assinatura afirma que existe obviamente jQuery( selector [, context ] ). @ Bellash: se é "quase o mesmo", qual é a diferença? Ou o que é mais rápido? Eu prefiro .find()uma vez que este é mais OO IMO ...

— Adrian Foder

7

Como verificar em caso de seleção múltipla?

— Hemant_Negi 25/05

3

@ AdrianFöder Para você e outras pessoas olhando para ele, .find()é de cerca de 10% mais rápido de acordo com esta resposta: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

Você pode usar o método jQuery find

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

A solução acima funciona perfeitamente, mas eu escolho adicionar o código a seguir para que eles desejem obter a opção clicada. Ele permite que você obtenha a opção selecionada mesmo quando esse valor selecionado não foi alterado. (Testado apenas com Mozilla)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

— Bellash
fonte

Vincular-se a optioneventos é uma proposta arriscada, principalmente em dispositivos móveis. Por exemplo, o Webkit não oferece suporte a esse evento corretamente: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

OK legal! Como eu disse, a segunda solução não é suportada em muitos navegadores!

— Bellash 29/02

15

Alternativa delegada

Caso alguém esteja usando a abordagem delegada para o ouvinte, use e.target(ele se referirá ao elemento select).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle Demo

— DanielST
fonte

+1 porque é isso que eu quero, mas quando tentei isso localmente, ele não está funcionando. Apenas trabalhe na jsfiddle, quais são as CDN que devo adicionar?

— AVI

6

Acho isso mais curto e limpo. Além disso, você pode percorrer os itens selecionados se houver mais de um;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

— 1.44mb
fonte

selectedOptionsnão está disponível em todos os navegadores.

— Bernhard Döbler

@ BernhardDöbler quais? alguma fonte?

— 1.44mb

1

Copiei seu código para o IE 11 e recebi um erro. Eu acabei com this.options[ this.options.selectedIndex ]. A Mozilla diz que é suportado pelo Firefox a partir de 26, IE Sem suporte.

— Bernhard Döbler

6

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

Primeiro crie um select option. Depois disso, jqueryvocê poderá obter o valor selecionado atual quando o usuário alterar o select optionvalor.

1

você pode, por favor, compartilhar uma explicação mais detalhada da sua resposta?

— Mostafiz 29/04

@MostafizurRahman meu código é muito fácil, é por isso que escrevi apenas código.

3

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

— Serdar Karaca
fonte

2

Outra e curta maneira de obter valor do valor selecionado,

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

— Recep Can
fonte

se este é o caso, por que não vai "var selectedVal = $ (" # selectElement ") val ()." work¿

— Luise

O caso está obtendo valor quando o evento de alteração é emitido no elemento select. O valor não seria atualizado ao selecionar alterações, se você fizer isso.

— Recep pode

0

Consulte a documentação oficial da API https://api.jquery.com/selected-selector/

Isso funciona bem:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

e

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

e seja fácil para uma escolha única

var SelVal = $( "#idSelect option:selected" ).val();

— alex Roosso
fonte

0

Você pode usar este evento de alteração de seleção jquery para obter o valor da opção selecionada

Para demonstração

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>

Expandir snippet

— Desenvolvedor
fonte