986 Stimmen

jQuery erhält Wert von select onChange

Ich hatte den Eindruck, dass ich den Wert eines Select-Eingangs folgendermaßen ermitteln kann $(this).val(); und die Anwendung der onchange an das Auswahlfeld.

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

Wie kann ich dies tun?

10voto

Ali Asad Punkte 113

Für alle Selects rufen Sie diese Funktion auf.

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

Für nur eine Auswahl:

$('#select_id')

8voto

Andre Mesquita Punkte 93

Suchen Sie nach jQuery Website

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 einen Gültigkeitstest für alle Texteingabeelemente hinzu:

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

6voto

ahmed Punkte 128

Ich habe ein Beispiel, das bei neuen Ideen helfen soll. Ich hoffe, dass dies jedem helfen wird.

$('#editpricelist_box').change(function ($e){
    $('input[name="edit_unit_price"]').val(parseFloat(this.val()).toFixed(2));
    console.log(this.val());
});

4voto

4braincells Punkte 73

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

Ich verwende zwei SELECTs, wobei das zweite ("subtopic") durch einen AJAX-Aufruf auf der Grundlage der Auswahl des ersten ("topic") gefüllt wird.

Zunächst der Thymianblatt-Schnipsel:

 <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 ist, und zeige alle Gruppen mit ihren Themen, und danach alle Themen, die keine Gruppe haben. BaseIdentity ist übrigens ein @Embedded composite key.

Nun, hier ist die jQuery, die Änderungen behandelt:

$('#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 Neuladen der Seite ausgeführt wird oder wenn ein Wert durch eine Initialisierung im Backend vorausgewählt wurde.

BTW: Ich verwende eine "manuelle" Formularvalidierung (siehe "is-valid"/"is-invalid"), weil es mir (und den Benutzern) nicht gefällt, dass BS4 nicht benötigte leere Felder als grün markiert. Aber das geht über den Rahmen dieser Frage hinaus und wenn Sie daran interessiert sind, kann ich es auch posten.

4voto

jQuery(document).ready(function(){

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

    });
})

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X