jQuery erhält den Wert von select onChange

779

Ich hatte den Eindruck, dass ich den Wert einer Auswahleingabe erhalten könnte, indem ich dies tue $(this).val();und den onchangeParameter auf das Auswahlfeld anwende.

Es scheint, dass es nur funktioniert, wenn ich auf die ID verweise.

Wie mache ich das damit?

jquery select

— RIK
quelle

1491

Versuche dies-

$('select').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Erweitern Sie das Snippet

Sie können auch mit onchange event- referenzieren.

function getval(sel)
{
    alert(sel.value);
}

<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Erweitern Sie das Snippet

— thecodeparadox
quelle

15

Ich weiß, dass dies ziemlich spät ist, aber wenn Sie mit der Tastatur (Tabulator) in einem Formular navigieren und mit den Aufwärts- / Abwärtspfeilen aus einer Dropdown-Liste auswählen, löst FireFox (22.0) das Änderungsereignis nicht aus. Sie müssen zusätzlich den Tastendruck für FireFox binden. Zusätzliche Informationen: jQuery 1.10.2 mit der Syntax $ ('select'). On ('change', function () {/ * do seomthing * /});

— MonkeyZeus

Mhh für mich, das jQuery-Beispiel funktioniert nicht und ich bin sicher, dass ich die 1.11 jQuery-Datei korrekt auf meiner Seite geladen habe. In den JS-Protokollen meines Browsers habe ich Folgendes erhalten: hat keine Methode 'on'. Ich habe es sowohl auf Firefox als auch auf Chrome versucht, das gleiche Ergebnis. Ist es eine Standardverwendung oder wurde es nur in den neueren jquery-Versionen implementiert? Danke für die Antwort

— Alex

2

@MonkeyZeus Sie brauchen nicht, es wird ausgelöst, wenn die Komponente den Fokus verliert. From (jQuery-Änderungsmethode) [ api.jquery.com/change/] "Bei Auswahlfeldern, Kontrollkästchen und Optionsfeldern wird das Ereignis sofort ausgelöst, wenn der Benutzer eine Auswahl mit der Maus trifft, bei den anderen Elementtypen jedoch das Ereignis wird verschoben, bis das Element den Fokus verliert. " Und natürlich können Sie .change()stattdessen eine Verknüpfung verwenden.

— PhoneixS

@Alex Sie machen etwas falsch, es war seit jQuery 1.7, siehe api.jquery.com/on .

— PhoneixS

1

@PhoneixS Verwenden Sie immer noch FireFox 22.0?

— MonkeyZeus

103

Ich hatte den Eindruck, dass ich mit diesem $ (this) .val () den Wert einer ausgewählten Eingabe erhalten könnte;

Dies funktioniert, wenn Sie unauffällig abonnieren (was der empfohlene Ansatz ist):

$('#id_of_field').change(function() {
    // $(this).val() will work here
});

Wenn Sie onselectMarkup verwenden und mit Skript mischen, müssen Sie einen Verweis auf das aktuelle Element übergeben:

onselect="foo(this);"

und dann:

function foo(element) {
    // $(element).val() will give you what you are looking for
}

— Darin Dimitrov
quelle

99

Das wird mir geholfen.

Zur Auswahl:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Für Radio / Checkbox:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

— ilgam
quelle

16

Probieren Sie die Ereignisdelegierungsmethode aus. Dies funktioniert in fast allen Fällen.

$(document.body).on('change',"#selectID",function (e) {
   //doStuff
   var optVal= $("#selectID option:selected").val();
});

— Krishna
quelle

10

Sie können dies versuchen (mit jQuery ) -

$('select').on('change', function()
{
    alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Erweitern Sie das Snippet

Oder Sie können einfaches Javascript wie dieses verwenden.

function getNewVal(item)
{
    alert(item.value);
}

<select onchange="getNewVal(this);">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Erweitern Sie das Snippet

— Abrar Jahin
quelle

10

$('#select_id').on('change', function()
{
    alert(this.value); //or alert($(this).val());
});



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="select_id">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

— Ankit Pise
quelle

9

Die Pfeilfunktion hat einen anderen Umfang als die Funktion und this.valuegibt für eine Pfeilfunktion undefiniert an. Verwendung zu beheben

$('select').on('change',(event) => {
     alert( event.target.value );
 });

— Sharuk Ahmed
quelle

6

Das hat bei mir funktioniert. Versuchte alles andere ohne Glück:

<html>

  <head>
    <title>Example: Change event on a select</title>

    <script type="text/javascript">

      function changeEventHandler(event) {
        alert('You like ' + event.target.value + ' ice cream.');
      }

    </script>

  </head>

  <body>
    <label>Choose an ice cream flavor: </label>
    <select size="1" onchange="changeEventHandler(event);">
      <option>chocolate</option>
      <option>strawberry</option>
      <option>vanilla</option>
    </select>
  </body>

</html>

Entnommen aus Mozilla

— drjorgepolanco
quelle

6

Suchen Sie nach der jQuery- Site

HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

JAVASCRIPT:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

Beispiel von jQuery:

So fügen Sie allen Texteingabeelementen einen Gültigkeitstest hinzu:

$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});

— Andre Mesquita
quelle

6

Rufen Sie für alle Auswahlen diese Funktion auf.

$('select').on('change', function()
{
    alert( this.value );
});

Für nur eine Auswahl:

$('#select_id')

— Ali Asad
quelle

4

jQuery ruft den Wert ausgewählter HTML-Elemente mit dem Ereignis "Ändern" ab

Für Demo & More Beispiel

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

<!DOCTYPE html>  
<html>  
<title>jQuery Select OnChnage Method</title>
<head> 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
</head>  
<body>  
<select id="select_box">
 <option value="">Select One</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</select>
<br><br>  
<input type="text" id="show_only" disabled="">
</body>  
</html>

Erweitern Sie das Snippet

— Entwickler
quelle

3

Beachten Sie, dass dies möglicherweise daran liegt, dass das DOM nicht geladen wurde und Ihr Element noch nicht gefunden wurde, wenn diese nicht funktionieren.

Um dies zu beheben, platzieren Sie das Skript am Ende des Textes oder verwenden Sie das Dokument bereit

$.ready(function() {
    $("select").on('change', function(ret) {  
         console.log(ret.target.value)
    }
})

— Colin D.
quelle

2

jQuery(document).ready(function(){

    jQuery("#id").change(function() {
      var value = jQuery(this).children(":selected").attr("value");
     alert(value);

    });
})

— Virendra Yaduvanshi
quelle

2

Lassen Sie mich ein Beispiel teilen, das ich mit BS4, Thymeleaf und Spring Boot entwickelt habe.

Ich verwende zwei SELECTs, bei denen das zweite ("Unterthema") durch einen AJAX-Aufruf basierend auf der Auswahl des ersten ("Thema") gefüllt wird.

Zunächst das Thymeleaf-Snippet:

 <div class="form-group">
     <label th:for="topicId" th:text="#{label.topic}">Topic</label>
     <select class="custom-select"
             th:id="topicId" th:name="topicId"
             th:field="*{topicId}"
             th:errorclass="is-invalid" required>
         <option value="" selected
                 th:text="#{option.select}">Select
         </option>
         <optgroup th:each="topicGroup : ${topicGroups}"
                   th:label="${topicGroup}">
             <option th:each="topicItem : ${topics}"
                     th:if="${topicGroup == topicItem.grp} "
                     th:value="${{topicItem.baseIdentity.id}}"
                     th:text="${topicItem.name}"
                     th:selected="${{topicItem.baseIdentity.id==topicId}}">
             </option>
         </optgroup>
         <option th:each="topicIter : ${topics}"
                 th:if="${topicIter.grp == ''} "
                 th:value="${{topicIter.baseIdentity.id}}"
                 th:text="${topicIter.name}"
                 th:selected="${{topicIter.baseIdentity?.id==topicId}}">
         </option>
     </select>
     <small id="topicHelp" class="form-text text-muted"
            th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->

<div class="form-group">
    <label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
    <select class="custom-select"
            id="subtopicsId" name="subtopicsId"
            th:field="*{subtopicsId}"
            th:errorclass="is-invalid" multiple="multiple">
        <option value="" disabled
                th:text="#{option.multiple.optional}">Select
        </option>
        <option th:each="subtopicsIter : ${subtopicsList}"
                th:value="${{subtopicsIter.baseIdentity.id}}"
                th:text="${subtopicsIter.name}">
        </option>
    </select>
    <small id="subtopicsHelp" class="form-text text-muted"
           th:unless="${#fields.hasErrors('subtopicsId')}"
           th:text="#{label.subtopics.tt}">select</small>
    <small id="subtopicsIdError" class="invalid-feedback"
           th:if="${#fields.hasErrors('subtopicsId')}"
           th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->

Ich iteriere über eine Liste von Themen, die im Modellkontext gespeichert sind, und zeige alle Gruppen mit ihren Themen und danach alle Themen, die keine Gruppe haben. BaseIdentity ist übrigens ein @ Embedded Composite Key.

Hier ist die jQuery, die Änderungen verarbeitet:

$('#topicId').change(function () {
    selectedOption = $(this).val();
    if (selectedOption === "") {
        $('#subtopicsId').prop('disabled', 'disabled').val('');
        $("#subtopicsId option").slice(1).remove(); // keep first
    } else {
        $('#subtopicsId').prop('disabled', false)
        var orig = $(location).attr('origin');
        var url = orig + "/getsubtopics/" + selectedOption;
        $.ajax({
            url: url,
           success: function (response) {
                  var len = response.length;
                    $("#subtopicsId option[value!='']").remove(); // keep first 
                    for (var i = 0; i < len; i++) {
                        var id = response[i]['baseIdentity']['id'];
                        var name = response[i]['name'];
                        $("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
                    }
                },
                error: function (e) {
                    console.log("ERROR : ", e);
                }
        });
    }
}).change(); // and call it once defined

Der erste Aufruf von change () stellt sicher, dass er beim erneuten Laden der Seite ausgeführt wird oder wenn ein Wert durch eine Initialisierung im Backend vorausgewählt wurde.

Übrigens: Ich verwende die "manuelle" Formularvalidierung (siehe "ist gültig" / "ist ungültig"), weil mir (und den Benutzern) nicht gefallen hat, dass BS4 nicht erforderliche leere Felder als grün markiert. Aber das ist nicht der Umfang dieses Q und wenn Sie interessiert sind, kann ich es auch posten.

— 4 Gehirnzellen
quelle

1

Ich möchte hinzufügen, wer volle benutzerdefinierte Header-Funktionalität benötigt

   function addSearchControls(json) {
        $("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
        $("#tblCalls thead tr:eq(1) th").each(function (index) {
            // For text inputs
            if (index != 1 && index != 2) {
                $(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
                var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
                searchControl.on("keyup", function () {
                    table.column(index).search(searchControl.val()).draw();
                })
            }
            // For DatePicker inputs
            else if (index == 1) {
                $(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');

                $('.tblCalls-search-date').on('keyup click change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    table.columns(index).search(v).draw();
                });

                $(".datepicker").datepicker({
                    dateFormat: "dd-mm-yy",
                    altFieldTimeOnly: false,
                    altFormat: "yy-mm-dd",
                    altTimeFormat: "h:m",
                    altField: "#tarih-db",
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
                    firstDay: 1,
                    dateFormat: "yy-mm-dd",
                    showOn: "button",
                    showAnim: 'slideDown',
                    showButtonPanel: true,
                    autoSize: true,
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: false,
                    buttonText: "Tarih Seçiniz",
                    closeText: "Temizle"
                });
                $(document).on("click", ".ui-datepicker-close", function () {
                    $('.datepicker').val("");
                    table.columns(5).search("").draw();
                });
            }
            // For DropDown inputs
            else if (index == 2) {
                $(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">&gt;=</option><option value="lt">&lt;=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');

                var selectedOperator;
                $('#filter_comparator').on('change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    selectedOperator = v;
                    if(v=="select")
                        table.columns(index).search('select|0').draw();
                    $('#filter_value').val("");
                });

                $('#filter_value').on('keyup click change', function () {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        var i = $(this).attr('id');  // getting column index
                        var v = $(this).val();  // getting search input value
                        table.columns(index).search(selectedOperator + '|' + v).draw();
                    }
                });
            }
        })

    }

— Hamit YILDIRIM
quelle