Événement de changement de déclenchement de la liste déroulante

Je veux déclencher l'événement de changement de dropdown dans $ (document) .ready en utilisant jquery.

J'ai une liste déroulante en cascade pour le pays et l'état dans la page des détails de l'utilisateur. comment puis-je définir la valeur (qui est tirée de la base de données en fonction de l'ID utilisateur) pour le pays et l'état dans MVC avec C #.

Je ne connais pas beaucoup JQuery mais j'ai entendu dire qu'il permet de déclencher des événements natifs avec cette syntaxe.

$(document).ready(function(){

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

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

Vous devez déclarer le gestionnaire d'événement change avant d'appeler trigger () ou change () sinon il ne sera pas déclenché. Merci pour la mention @LenielMacaferi.

Plus d'informations ici .

Essaye ça:

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

Définissez l'événement de modification et déclenchez-le immédiatement. Cela garantit que le gestionnaire d'événements est défini avant de l'appeler.

Il peut être en retard pour répondre à l'affiche originale, mais quelqu'un d'autre pourrait bénéficier de la notation abrégée, et cela suit le chaînage de jQuery, etc.

chaînage jquery

Essaye ça:

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

Travaille pour moi.

Sur une ligne avec le réglage de la valeur: $('#id').val(16).change();

Si vous essayez d'avoir des listes déroulantes liées, la meilleure façon de le faire est d'avoir un script qui renvoie une boîte de sélection prédéfinie et un appel AJAX qui le demande.

Voici la documentation de la méthode Ajax de jQuery si vous en avez besoin.

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

});

Ensuite, ayez une étendue autour de votre boîte de sélection d'état avec l'ID de "stateBoxHook"

alternativement, vous pouvez mettre l'attribut onchange sur la liste déroulante elle-même, qui onchange appellera certaines fonctions jquery comme celle-ci.

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

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

j'espère que celui-ci vous aidera, et veuillez noter que ce code n'est qu'un brouillon, non testé sur aucune idée. Merci

Pour une raison quelconque, les autres jQuerysolutions fournies ici fonctionnaient lors de l'exécution du script à partir de la console, mais cela ne fonctionnait pas pour moi lorsqu'il était déclenché à partir des signets Chrome .

Heureusement, cette solution Vanilla JS (la triggerChangeEventfonction) a fonctionné:

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