jquery select change event opzione selezionata

235

Ho associato un evento all'evento change dei miei elementi select con questo:

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

});

Come posso accedere all'elemento che è stato selezionato quando si verifica l'evento change?

jquery events

— Zulakis
fonte

1

Perché dici così?

— Miguel,

3

@superuberduper Ho evitato jquery il più a lungo possibile, ma la resistenza è futile. Ti sentirai molto meglio dopo essere stato assimilato.

— adg

lolol @adg così buono!

— SuperUberDuper

461

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

— Naftali aka Neal
fonte

8

Cosa significa la sintassi $ ("selettore", questo)? Ho un'idea generale, ma non ne sono del tutto sicuro

— JoshWillik,

14

@JoshWillik con $("selector", this)te stanno trovando tutti gli selectorelementi all'interno thisdel contesto. Scrivere $("selector", this)è quasi lo stesso di $(this).find('selector')

— Bellash,

8

@JoshWillik: poiché $()è un alias di jQuery(), puoi trovare la documentazione qui: api.jquery.com/jQuery La firma dichiarata è ovviamente presente jQuery( selector [, context ] ). @Bellash: se è "quasi lo stesso", qual è la differenza? O cosa è più veloce? Preferisco .find()poiché questo è più OO IMO ...

— Adrian Föder

7

Come verificare in caso di selezione multipla?

— Hemant_Negi,

3

@ AdrianFöder Per te e le altre persone che lo cercano, .find()è circa il 10% più veloce in base a questa risposta: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo,

75

È possibile utilizzare il metodo find di jQuery

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

La soluzione sopra funziona perfettamente, ma ho scelto di aggiungere il seguente codice per loro disposti a ottenere l'opzione cliccata. Ti permette di ottenere l'opzione selezionata anche quando questo valore selezionato non è cambiato. (Testato solo con Mozilla)

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

— Bellash
fonte

Associarsi agli optioneventi è una proposta rischiosa, in particolare sui dispositivi mobili. Ad esempio, Webkit non supporta correttamente questo evento: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

Ok bello! Come ho detto, la seconda soluzione non è supportata in molti browser!

— Bellash,

15

Alternativa delegata

Nel caso in cui qualcuno stia utilizzando l' approccio delegato per il proprio listener, utilizzare e.target(farà riferimento all'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 perché è quello che voglio, ma quando l'ho provato localmente, non funziona. Solo lavorando su jsfiddle, quali sono i CDN che devo aggiungere?

— AVI

6

Lo trovo più corto e pulito. Inoltre, puoi scorrere gli elementi selezionati se ce ne sono più di uno;

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

— 1.44MB
fonte

selectedOptionsnon è disponibile in tutti i browser.

— Bernhard Döbler,

@ BernhardDöbler quali? qualche fonte?

— 1.44mb del

1

Ho copiato il tuo codice su IE 11 e ho ricevuto un errore. Ho finito con this.options[ this.options.selectedIndex ]. Mozilla afferma che è supportato da Firefox dal 26, IE Nessun supporto.

— Bernhard Döbler il

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

Per prima cosa crea un select option. Successivamente, jqueryè possibile ottenere il valore corrente selezionato quando l'utente cambia select optionvalore.

1

puoi per favore condividere maggiori dettagli sulla spiegazione della tua risposta?

— Mostafiz,

@MostafizurRahman il mio codice è molto semplice, ecco perché ho scritto solo codice.

3

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

— Serdar Karaca
fonte

2

Un altro e breve modo per ottenere il valore selezionato,

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

— Recep Can
fonte

in questo caso, perché non "var selectedVal = $ (" # selectElement "). val ()" work¿

— LuisE

Il caso sta ottenendo valore quando l'evento change viene emesso sull'elemento select. Il valore non verrebbe aggiornato quando si seleziona cambia se ti piace.

— Recep Can

0

Consulta la documentazione API ufficiale https://api.jquery.com/selected-selector/

Questo buon funziona:

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

ed essere facile per una scelta unica

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

— alex Roosso
fonte

0

È possibile utilizzare questo evento di modifica della selezione jquery per ottenere il valore dell'opzione selezionata

Per la demo

$(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>

Espandi frammento

— Sviluppatore
fonte