Question

Ich versuche, Jquery zu verwenden, um den Wert aus einer "Select" -Eingabe in einem Formular zu ändern, aber wenn es ändert, funktioniert die Funktion für diese Änderung nicht.

HTML:

<select id='select'> 
    <option checked value='1' >Option 1</option> 
    <option value='2' >Option 2</option> 
</select> 
<div id='text'>Option 1 selected</div> 
<div id='button'>Click to select Option 2</div> 

JQuery:

$('#select').change(function(){ 
    if($(this).val() == '1'){ 
    $('#text').text('Option 1 selected'); 
    } else if($(this).val() == '2'){ 
    $('#text').text('Option 2 selected'); 
    } 
}); 

$('#button').click(function(){ 
    $('#select').val('2'); 
}) 

CSS:

#button { 
    cursor: pointer; 
    color: white; 
    background: red; 
    padding: 5px; 
    display: inline-block; 
} 

Demo: https://jsfiddle.net/fdko9nna/

Wenn ich die #button div klicken, ändert sich th e Auswahlfeld, aber die Funktion, die die #text ändert, wird nicht ausgeführt.
Danke.

Answer 1

Sie müssen die Änderungsereignis auslösen entweder mit .change() oder trigger('change') im Code Ihrer Schaltfläche:

$('#button').click(function(){ 
    $('#select').val('2').change(); 
}) 

Das Änderungsereignis Sie auf das Auswahl gebunden nicht allein durch Änderung des Wertes über jQuery ausgelöst werden, so Sie müssen das Änderungsereignis von jQuery aufrufen.

jsFiddle example

Answer 2

Basierend auf https://api.jquery.com/change/

Beschreibung: Binden eines Event-Handlers in die "Change" JavaScript-Event oder das Ereignis auslösen auf einem Element.

Diese Methode ist eine Abkürzung für .on ("change", Handler) in den ersten beiden Varianten und .trigger ("change") in der dritten Variante.

Das Änderungsereignis wird an ein Element gesendet, wenn sich dessen Wert ändert. Dieses Event ist auf Elemente, Boxen und Elemente beschränkt. Bei Auswahlfeldern, Kontrollkästchen und Optionsfeldern wird das Ereignis sofort ausgelöst, wenn der Benutzer mit der Maus eine Auswahl trifft. Bei den anderen Elementtypen wird das Ereignis jedoch zurückgestellt, bis das Element den Fokus verliert.

Ihr in JQuery geänderter Wert hat das Änderungsereignis nicht ausgelöst. Sie müssen einen Trigger für das Änderungsereignis hinzufügen.