Änderungsereignis <Auswahl> mit jquery auslösen

145

Gibt es sowieso ich könnte ein Änderungsereignis auf Auswahlfeld beim Laden der Seite auslösen und eine bestimmte Option auswählen.

Auch die Funktion, die durch Hinzufügen des Triggers ausgeführt wird, nachdem die Funktion an das Ereignis gebunden wurde.

Ich habe versucht , die Ausgabe so etwas wie diese

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

jquery

— Kishanio
quelle

Möchten Sie beim Laden eine bestimmte Option festlegen? oder möchten Sie Ihr Änderungsereignis auslösen?

— Manse

Könnten Sie die endgültige Lösung erweitern? Versuchen Sie, eine Option beim Laden der Seite erzwingen zu lassen, oder wählen Sie eine andere Option aus, wenn etwas Bestimmtes ausgewählt ist?

— Matthew Riches

Hallo, danke für dein Feedback. Ich konnte das Problem lösen und habe es dokumentiert.

— Kishanio

287

Verwenden Sie val()diese Option , um zum Wert (nicht zum Text) zu wechseln und trigger()das Ereignis manuell auszulösen.

Der Change Event Handler muss vor dem Trigger deklariert werden.

Hier ist ein Beispiel

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

— Joseph
quelle

Auch nach dem Ändern der Option wollte ich die Änderungsereignisfunktion ausführen. wrt das . Alarmbox sollte ausgeführt werden.

— Kishanio

@KishanThobhani sollten Sie das nach dem Hinzufügen des Handlers aufrufen . siehe das Beispiel.

— Joseph

7

Der wichtige Teil dieser Lösung ist: Der Change Event Handler MUSS VOR dem Trigger deklariert werden (macht Sinn ...), in meinem Fall war das das Problem, danke!

— Larzan

Es half als Retter, danke @Joseph

— Divya

definierte Änderungsfunktion BEVOR Sie verwenden, hat mein Problem gelöst. Vielen Dank.

— Kamlesh

27

Verwenden Sie zum Auswählen einer Option .val('value-of-the-option')das Auswahlelement. Verwenden Sie .change()oder, um das Änderungselement auszulösen .trigger('change').

Die Probleme in Ihrem Code sind das Komma anstelle des Punktes $('.check'),trigger('change');und die Tatsache, dass Sie es aufrufen, bevor Sie den Ereignishandler binden.

— DiebMaster
quelle

10

$('#edit_user_details').find('select').trigger('change');

Es würde das Dropdown-Element select html tag tag with ändern id="edit_user_details".

— Sohail xIN3N
quelle

6

Eine weitere funktionierende Lösung für diejenigen, die mit dem jQuery-Trigger-Handler blockiert wurden, besteht darin, dass bei nativen Ereignissen ein Brand ausgelöst wird (100% funktionsfähig):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

— Mohamed23gharbi
quelle

1

Ich habe alles versucht, aber nur dieses funktioniert für mich. Ich denke, weil meine Auswahl in vue war. Danke @ Mohamed23gharbi!

— Tillito

1

Hier gilt das gleiche. Dies ist die Lösung, nach der ich seit einer Stunde gesucht habe. Vielen Dank.

— Mberna

1

Das muss die Antwort sein!

— MARS

1

Geben Sie Links im Wert des Options-Tags an

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

— Afraz Ahmad
quelle

1

Wenn Sie einige Überprüfungen durchführen möchten, verwenden Sie diese Methode

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

— Afraz Ahmad
quelle

0

Basierend auf der Antwort von Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

In meinem Fall, in dem die Elemente von vue erstellt wurden, funktioniert dies nur.

— Tillito
quelle

0

Sie können den folgenden Code versuchen, um Ihr Problem zu lösen:

Standardmäßig wählt die erste Option: jQuery ('. Select'). Find ('option') [0] .selected = true;

Danke, Ketan T.

— Ketan Tambekar
quelle