jquery select change event erhält die ausgewählte Option

234

Ich habe ein Ereignis an das Änderungsereignis meiner ausgewählten Elemente gebunden:

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

});

Wie kann ich auf das Element zugreifen, das beim Eintreten des Änderungsereignisses ausgewählt wurde?

jquery events

— Zulakis
quelle

1

Warum sagst du das?

— Miguel

3

@superuberduper Ich habe jquery so lange ich konnte vermieden, aber Widerstand ist zwecklos. Du wirst dich so viel besser fühlen, nachdem du assimiliert wurdest.

— Adg

lolol @adg so gut!

— SuperUberDuper

459

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

— Naftali alias Neal
quelle

8

Was bedeutet die Syntax $ ("Selektor", diese)? Ich habe eine allgemeine Idee, aber ich bin nicht ganz sicher

— JoshWillik

14

@JoshWillik mit $("selector", this)Ihnen finden alle selectorElemente im thisKontext. Schreiben $("selector", this)ist fast das gleiche wie $(this).find('selector')

— Bellash

8

@JoshWillik: Da $()es sich um einen Alias von handelt jQuery(), finden Sie die Dokumentation hier: api.jquery.com/jQuery Die dort angegebene Signatur ist offensichtlich jQuery( selector [, context ] ). @ Bellash: Wenn es "fast gleich" ist, was ist der Unterschied? Oder was ist schneller? Ich bevorzuge, .find()da dies mehr OO IMO ist ...

— Adrian Föder

7

Wie überprüfe ich bei Mehrfachauswahl?

— Hemant_Negi

3

@ AdrianFöder Für Sie und andere Leute, die danach suchen, .find()ist laut dieser Antwort etwa 10% schneller: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

Sie können die Methode jQuery find verwenden

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

Die obige Lösung funktioniert perfekt, aber ich füge den folgenden Code hinzu, damit sie die angeklickte Option erhalten. Sie können die ausgewählte Option auch dann erhalten, wenn sich dieser Auswahlwert nicht geändert hat. (Nur mit Mozilla getestet)

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

— Bellash
quelle

Die Bindung an optionEreignisse ist insbesondere auf Mobilgeräten ein riskantes Unterfangen. Zum Beispiel unterstützt Webkit dieses Ereignis nicht richtig: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

OK Cool! Wie gesagt, die zweite Lösung wird in vielen Browsern nicht unterstützt!

— Bellash

15

Delegierte Alternative

Wenn jemand den delegierten Ansatz für seinen Listener verwendet, verwenden Sie e.target(er bezieht sich auf das Auswahlelement).

$('#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
quelle

+1, weil dies das ist, was ich will, aber als ich es lokal ausprobiert habe, funktioniert es nicht. Nur bei jsfiddle arbeiten, was ist das CDN, das ich hinzufügen muss?

— AVI

6

Ich finde das kürzer und sauberer. Außerdem können Sie ausgewählte Elemente durchlaufen, wenn mehr als eines vorhanden ist.

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

— 1,44 MB
quelle

selectedOptionsist nicht in allen Browsern verfügbar.

— Bernhard Döbler

@ BernhardDöbler welche? irgendeine Quelle?

— 1,44 MB

1

Ich habe Ihren Code in IE 11 kopiert und eine Fehlermeldung erhalten. Ich endete mit this.options[ this.options.selectedIndex ]. Mozilla sagt, wird von Firefox ab 26 unterstützt, IE Keine Unterstützung.

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

Erstellen Sie zuerst eine select option. Danach jquerykönnen Sie den aktuell ausgewählten Wert abrufen, wenn der Benutzer den select optionWert ändert .

Können Sie uns bitte eine ausführlichere Erklärung Ihrer Antwort geben?

— Mostafiz

@MostafizurRahman mein Code sehr einfach, deshalb habe ich nur Code geschrieben.

3

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

— Serdar Karaca
quelle

2

Ein weiterer und kurzer Weg, um den Wert des ausgewählten Werts zu erhalten,

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

— Recep Can
quelle

Wenn dies der Fall ist, warum nicht "var selectedVal = $ (" # selectElement "). val ()" work¿

— LuisE

Der Fall erhält einen Wert, wenn ein Änderungsereignis für das ausgewählte Element ausgegeben wird. Der Wert wird nicht aktualisiert, wenn Sie Änderungen auswählen, wenn Sie dies möchten.

— Recep Can

0

Siehe offizielle API-Dokumentation https://api.jquery.com/selected-selector/

Das funktioniert gut:

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

und

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

und einfach für eine einzigartige Wahl sein

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

— Alex Roosso
quelle

0

Sie können dieses jquery select change-Ereignis verwenden, um den ausgewählten Optionswert abzurufen

Für die 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>

Erweitern Sie das Snippet

— Entwickler
quelle