Änderungsereignis der Dropdown-Liste auslösen

86

Ich möchte das Änderungsereignis der Dropdown-Liste in $ (Dokument) auslösen. Bereits mit jquery.

Ich habe eine kaskadierende Dropdown-Liste für Land und Bundesland auf der Seite mit den Benutzerdetails. Wie kann ich den Wert (der aus der Datenbank basierend auf der Benutzer-ID entnommen wird) für Land und Bundesland in MVC mit C # festlegen?

Prasad
quelle
Vielleicht möchten Sie noch mehr Tags wie Javascript und jQuery einfügen, um mehr zu finden
Xenon

Antworten:

183

Ich weiß nicht so viel über JQuery, aber ich habe gehört, dass es erlaubt, native Ereignisse mit dieser Syntax auszulösen.

$(document).ready(function(){

    $('#countrylist').change(function(e){
       // Your event handler
    });

    // And now fire change event when the DOM is ready
    $('#countrylist').trigger('change');
});

Sie müssen den Änderungsereignishandler deklarieren, bevor Sie trigger () oder change () aufrufen, da er sonst nicht ausgelöst wird. Vielen Dank für die Erwähnung @LenielMacaferi.

Weitere Informationen hier .

Christophe Eblé
quelle
13
Sie müssen den Änderungsereignishandler vor dem Aufruf deklarieren trigger()oder sogar change()wie in dieser Antwort korrekt gezeigt, dh wenn der Ereignishandlercode unter dem Aufruf angezeigt wird, passiert nichts! :)
Leniel Maccaferri
3
@LenielMacaferi Danke, dass du mir ein oder zwei Stunden gespart hast.
Frank Nocke
@Christophe Eblé & Leniel Macaferi, vielen Dank. Christophe, könnten Sie bitte Leniels Kommentar zu Ihrer Antwort hinzufügen?
Zaxter
Ich habe .change () verwendet, aber kein Glück mit jquery 3.1.1. Nach diesem Beitrag wird es wie erwartet ausgelöst.
Sorangwala Abbasali
Dies führt nur zu einer endlosen Schleife, und jede Lösung für dieses Problem führt zu einer Schleife.
Nathan McKaskle
12

Versuche dies:

$(document).ready(function(event) {
    $('#countrylist').change(function(e){
         // put code here
     }).change();
});

Definieren Sie das Änderungsereignis und lösen Sie es sofort aus. Dadurch wird sichergestellt, dass der Ereignishandler vor dem Aufruf definiert wird.

Es könnte zu spät sein, das Originalplakat zu beantworten, aber jemand anderes könnte von der Kurzschreibweise profitieren, und dies folgt auf die Verkettung von jQuery usw.

jquery Verkettung

mlnyc
quelle
7

Versuche dies:

$('#id').change();

Funktioniert bei mir.

In einer Zeile zusammen mit der Einstellung des Wertes: $('#id').val(16).change();

d.popov
quelle
3
$ ('# id'). val (16) .change (); habe es für mich getan.
TomoMiha
1
Danke, @TomoMiha. Fügte es in der Antwort hinzu.
d.popov
2

Wenn Sie versuchen, Dropdown-Listen zu verknüpfen, ist es am besten, ein Skript zu verwenden, das ein vorgefertigtes Auswahlfeld und einen AJAX-Aufruf zurückgibt, der dies anfordert.

Hier finden Sie die Dokumentation zur Ajax-Methode von jQuery, falls erforderlich.

$(document).ready(function(){

    $('#countrylist').change(function(e){
        $this = $(e.target);
        $.ajax({
            type: "POST",
            url: "scriptname.asp", // Don't know asp/asp.net at all so you will have to do this bit
            data: { country: $this.val() },
            success:function(data){
                $('#stateBoxHook').html(data);
            }
        });
    });

});

Geben Sie dann einen Bereich um Ihr Status-Auswahlfeld mit der ID "stateBoxHook" ein.

Xenon
quelle
Ich habe kaskadierende Dropdowns: <% = Html.DropDownList ("MyCountries", "--- Select Country ---")%> <% = Html.CascadingDropDownList ("MyStates", "MyCountries")%> Ich kann die festlegen Wert von MyCountries als $ ("# MyCountries"). val ('<% = Model.CountryId%>'); in $ (Dokument). bereits. Aber ich kann den Wert für den Status nicht festlegen, da nur eine Option "Status auswählen" angezeigt wird, die bei einem Länderwechselereignis ausgefüllt werden sollte, da es sich um kaskadierende Dropdowns handelt. Dies ist das eigentliche Problem.
Prasad
Ich bin mir immer noch nicht sicher, wonach du suchst. Versuchen Sie, ein System zu erreichen, bei dem ein Land ausgewählt wird und die Liste auf die Staaten in diesem Land eingegrenzt wird? In diesem Fall müssen Sie einen AJAX-Anruf an den Server senden, das ausgewählte Land abschicken und dann eine Liste der Staaten in diesem Land zurückgeben.
Xenon
Ich habe USA als Land und Alabama als Bundesstaat festgelegt, was eine kaskadierende Dropdown-Liste ist, während ich das Benutzerprofil hinzufüge. Und wenn ich zu dieser Seite zurückkehre, um ein Feld zu bearbeiten, müssen Land und Bundesland mit den zuvor festgelegten Werten gefüllt werden. Ich habe kein Problem beim Hinzufügen des Benutzerprofils. Wenn ich zur Seite Bearbeiten zurückkehre, kann ich den Wert für die Dropdown-Liste "Land" festlegen. In der Dropdown-Liste "Status" werden die Werte nicht gefüllt, da sie kaskadiert werden und den Länderwert füllen Ereignis ändern. Dazu muss ich das Änderungsereignis des Landes auslösen, damit der Status gefüllt wird und ich den Status festlegen kann
Prasad
Warum ist das so? Sie wissen, wie das Land zum Zeitpunkt des Ladens der Seite ist, sodass Sie die richtige Auswahlliste der Bundesstaaten mit dem richtigen ausgewählten Status rendern können. Wenn Sie das Land ändern, wird die Liste trotzdem neu geladen.
Xenon
1

Alternativ können Sie das Attribut onchange in die Dropdown-Liste selbst einfügen, damit onchange bestimmte jquery-Funktionen wie diese aufruft.

<input type="dropdownlist" onchange="jqueryFunc()">

<script type="text/javascript">
$(function(){
    jqueryFunc(){
        //something goes here
    }
});
</script>

Ich hoffe, dieser hilft Ihnen, und bitte beachten Sie, dass dieser Code nur ein grober Entwurf ist, der auf keiner Idee getestet wurde. Vielen Dank

Dave
quelle
Dies löst das Änderungsereignis nicht aus, wenn die Seite zum ersten Mal
0

Aus irgendeinem Grund jQueryfunktionierten die anderen hier bereitgestellten Lösungen beim Ausführen des Skripts über die Konsole. Bei der Auslösung über Chrome Bookmarklets funktionierte dies jedoch nicht .

Glücklicherweise hat diese Vanilla JS-Lösung (die triggerChangeEventFunktion) funktioniert:

/**
  * Trigger a `change` event on given drop down option element.
  * WARNING: only works if not already selected.
  * @see /programming/902212/trigger-change-event-of-dropdown/58579258#58579258
  */
function triggerChangeEvent(option) {
  // set selected property
  option.selected = true;
  
  // raise event on parent <select> element
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    option.parentNode.dispatchEvent(evt);
  }
  else {
    option.parentNode.fireEvent("onchange");
  }
}

// ################################################
// Setup our test case
// ################################################

(function setup() {
  const sel = document.querySelector('#fruit');
  sel.onchange = () => {
    document.querySelector('#result').textContent = sel.value;
  };
})();

function runTest() {
  const sel = document.querySelector('#selector').value;
  const optionEl = document.querySelector(sel);
  triggerChangeEvent(optionEl);
}
<select id="fruit">
  <option value="">(select a fruit)</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="pineapple">Pineapple</option>
</select>

<p>
  You have selected: <b id="result"></b>
</p>
<p>
  <input id="selector" placeholder="selector" value="option[value='banana']">
  <button onclick="runTest()">Trigger select!</button>
</p>

Domi
quelle