Déclencher l'événement de changement <select> à l'aide de jquery

146

est-ce que je pourrais déclencher un événement de changement sur la boîte de sélection lors du chargement de la page et sélectionner une option particulière.

La fonction est également exécutée en ajoutant le déclencheur après avoir lié la fonction à l'événement.

J'essayais de sortir quelque chose comme ça

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

jquery

— Kishanio
source

voulez-vous définir une option particulière lors du chargement? ou vous souhaitez déclencher votre événement de changement?

— Manse

Pourriez-vous développer la solution finale. Essayez-vous de forcer une option lors du chargement de la page ou de sélectionner une option différente lorsque quelque chose de spécifique est sélectionné?

— Matthew Riches

salut, merci pour vos commentaires, j'ai pu résoudre le problème et l'avoir documenté.

— kishanio

288

Utilisez val()pour changer la valeur (pas le texte) et trigger()pour déclencher manuellement l'événement.

Le gestionnaire d'événement change doit être déclaré avant le déclencheur.

Voici un échantillon

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

— Joseph
source

Aussi après avoir changé d'option, je voulais exécuter la fonction d'événement de changement. Wrt ceci . la boîte d'alerte doit s'exécuter.

— kishanio

@KishanThobhani, vous devriez l'appeler après avoir ajouté le gestionnaire. voir l'exemple.

— Joseph

7

La partie importante de cette solution est: Le gestionnaire d'événement de changement DOIT être déclaré AVANT le déclencheur (cela a du sens ...), dans mon cas, c'était le problème, merci!

— Larzan le

Cela a aidé en tant que sauveur, merci @Joseph

— Divya

fonction de changement définie AVANT d'utiliser, a résolu mon problème. Merci.

— Kamlesh

28

Pour sélectionner une option, utilisez .val('value-of-the-option')sur l'élément de sélection. Pour déclencher l'élément de modification, utilisez .change()ou.trigger('change') .

Les problèmes dans votre code sont la virgule au lieu du point $('.check'),trigger('change');et le fait que vous l'appelez avant de lier le gestionnaire d'événements.

— ThiefMaster
source

10

$('#edit_user_details').find('select').trigger('change');

Cela changerait l' élément déroulant de la balise html sélectionnée avec id="edit_user_details".

— Sohail xIN3N
source

7

Une autre solution de travail pour ceux qui ont été bloqués avec le gestionnaire de déclencheur jQuery, que le feu dosent sur les événements natifs sera comme ci-dessous (100% fonctionnel):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

— Mohamed23gharbi
source

1

J'ai essayé tout ce qui précède, mais seul celui-ci fonctionne pour moi. Je pense, parce que ma sélection était vue de l'intérieur. Merci @ Mohamed23gharbi!

— Tillito

1

Pareil ici. C'est la solution que je cherchais depuis une heure. Merci.

— mberna

1

Cela doit être la réponse!

— MARS

1

Donner des liens en valeur de la balise option

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

— Afraz Ahmad
source

1

Si vous souhaitez effectuer des vérifications, utilisez cette méthode

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

— Afraz Ahmad
source

0

Basé sur la réponse de Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

Dans mon cas, où les éléments ont été créés par vue, c'est la seule façon qui fonctionne.

— Tillito
source

0

Vous pouvez essayer le code ci-dessous pour résoudre votre problème:

Par défaut, la première option select: jQuery ('. Select'). Find ('option') [0] .selected = true;

Merci, Ketan T

— Ketan Tambekar
source