Änderungsereignis der Dropdown-Liste auslösen

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?

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 .

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

Versuche dies:

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

Funktioniert bei mir.

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

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.

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

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>