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

86

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 #.

Prasad
la source
Vous voudrez peut-être mettre plus de balises telles que javascript et jQuery pour obtenir cela plus trouvé
xenon

Réponses:

185

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 .

Christophe Eblé
la source
13
Vous devez déclarer le gestionnaire d'événements de modification avant d'appeler trigger()ou même change()comme indiqué correctement dans cette réponse, c'est-à-dire que si le code du gestionnaire d'événements apparaît sous l'appel, rien ne se passe! :)
Leniel Maccaferri
3
@LenielMacaferi Merci de m'avoir fait gagner une heure ou deux.
Frank Nocke
@Christophe Eblé & Leniel Macaferi, merci beaucoup. Christophe, pourriez-vous s'il vous plaît ajouter le commentaire de Leniel à votre réponse?
Zaxter
J'ai utilisé .change () mais pas de chance avec jquery 3.1.1, après ce post, il se déclenche comme prévu.
Sorangwala Abbasali
Cela finit par boucler sans fin, la solution de tout le monde à cela finit par boucler.
Nathan McKaskle
12

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

mlnyc
la source
7

Essaye ça:

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

Travaille pour moi.

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

d.popov
la source
3
$ ('# id'). val (16) .change (); l'a fait pour moi.
TomoMiha
1
Merci, @TomoMiha. Ajouté dans la réponse.
d.popov
2

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"

xénon
la source
J'ai des listes déroulantes en cascade: <% = Html.DropDownList ("MyCountries", "--- Select Country ---")%> <% = Html.CascadingDropDownList ("MyStates", "MyCountries")%> Je peux définir le valeur de MyCountries comme $ ("# MyCountries"). val ('<% = Model.CountryId%>'); dans $ (document) .ready. Mais je ne suis pas en mesure de définir la valeur de l'état car il n'affiche qu'une seule option "Sélectionner l'état", qui doit être renseignée lors de l'événement onchange de pays car il s'agit de listes déroulantes en cascade. C'est un problème réel.
Prasad
Vous ne savez toujours pas ce que vous recherchez. Essayez-vous de mettre en place un système dans lequel ils sélectionnent un pays et réduisent la liste aux États de ce pays? Si tel est le cas, vous devrez avoir un appel AJAX vers le serveur et envoyer le pays sélectionné, puis renvoyer une liste des États de ce pays.
xenon
J'ai défini les États-Unis comme pays et l'Alabama comme État, qui est une liste déroulante en cascade, tout en ajoutant le profil utilisateur. Et quand je reviens sur cette page pour modifier un champ, j'ai besoin que le pays et l'état soient remplis avec les valeurs que j'ai définies précédemment. Je n'ai aucun problème pour ajouter le profil utilisateur, lorsque je reviens à la page Modifier, je suis en mesure de définir la valeur pour la liste déroulante Pays et dans la liste déroulante État, les valeurs ne sont pas remplies car elles sont en cascade, ce qui correspond à la valeur du pays événement de changement. Pour cela, je dois déclencher l'événement de changement de pays afin que l'état soit rempli et que je puisse définir l'état
Prasad
pourquoi est-ce le cas? Vous savez quel est le pays au moment du chargement de la page, vous pouvez donc afficher la liste de sélection correcte des états avec le bon état sélectionné. Lorsque vous changez de pays, la liste sera rechargée de toute façon.
xenon
1

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

Dave
la source
Cela ne déclenche pas l'événement de modification lorsque la page se charge pour la première fois (selon la question de l'OP)
0

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>

Domi
la source