Activar evento de cambio de menú desplegable

Quiero activar el evento de cambio del menú desplegable en $ (documento). Listo usando jquery.

Tengo un menú desplegable en cascada para el país y el estado en la página de detalles del usuario. ¿Cómo puedo establecer el valor (que se toma de DB según la identificación del usuario) para el país y el estado en MVC con C #?

No sé mucho de JQuery, pero he oído que permite disparar eventos nativos con esta sintaxis.

$(document).ready(function(){

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

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

Debe declarar el controlador de eventos de cambio antes de llamar a trigger () o change (), de lo contrario no se activará. Gracias por la mención @LenielMacaferi.

Más información aquí .

Prueba esto:

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

Defina el evento de cambio y actívelo inmediatamente. Esto asegura que el controlador de eventos esté definido antes de llamarlo.

Puede que sea tarde para responder el póster original, pero alguien más podría beneficiarse de la notación abreviada, y esto sigue al encadenamiento de jQuery, etc.

encadenamiento de jquery

Prueba esto:

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

Funciona para mi.

En una línea junto con la configuración del valor: $('#id').val(16).change();

Si está tratando de tener listas desplegables vinculadas, la mejor manera de hacerlo es tener un script que devuelva un cuadro de selección prediseñado y una llamada AJAX que lo solicite.

Aquí está la documentación para el método Ajax de jQuery si lo necesita.

$(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);
            }
        });
    });

});

Luego, tenga un intervalo alrededor del cuadro de selección de su estado con la identificación de "stateBoxHook"

alternativamente, puede poner el atributo onchange en la propia lista desplegable, que onchange llamará a cierta función jquery como esta.

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

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

Espero que este te ayude, y ten en cuenta que este código es solo un borrador, no probado en ningún ide. Gracias

Por alguna razón, las otras jQuerysoluciones proporcionadas aquí funcionaron al ejecutar el script desde la consola, sin embargo, no funcionó para mí cuando se activó desde Chrome Bookmarklets .

Afortunadamente, esta solución de Vanilla JS (la triggerChangeEventfunción) funcionó:

/**
  * 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>