Détecter comment un select a été modifié

Question

J'ai un champ select qui a une logique sur le clavier, et change, pour faire des choses. Existe-t-il un moyen de vérifier comment cela a été changé? Par exemple: Je souhaite uniquement que la logique soit déclenchée si elle a été modifiée à l'aide d'une souris ou si vous avez appuyé sur Entrée.

Pour ceux qui recherchent ma solution exacte

http://aaronscherer.me/blog/2013/07/31/jquery-roll-to-next-input/

Answer 1

Oui - vous pouvez écouter tout état de cause sur tout élément dans le DOM. Découvrez this fiddle comme point de départ. Voici un full list of mouse events et keyboard events que vous pouvez écouter.

HTML

<select class="my-select-1"> 
    <option value="1">First</options> 
    <option value="2">Second</options> 
</select> 

<select class="my-select-2"> 
    <option value="1">A choice</options> 
    <option value="2">Another choice</options> 
</select> 

jQuery

$(document).ready(function() { 

    $(".my-select-1").on("click", function(event){ 
     alert('Do something - click event'); 
    }); 

    $('.my-select-2').on('keypress', function(e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if(code == 13) { //Enter keycode 
      alert('Do something - enter key press'); 
     }  
    }); 

}); 

Dans l'exemple ci-dessus, $(".my-select-1) est le sélecteur, il pourrait être quelque chose (un ID, un type d'élément, etc.). Plus d'informations sur les sélecteurs here. La partie suivante, .on("mousedown", associe une fonction de gestionnaire d'événement pour un ou plusieurs événements aux éléments sélectionnés - dans ce cas, un seul événement, mousedown. Plus d'infos sur le here.

Le deuxième exemple, est un peu plus de fantaisie car nous devons déterminer quelle touche a été enfoncée, mais autre que celle utilise le même concept. Vous pouvez trouver une très longue discussion à ce sujet sur this post, mais s'il vous plaît noter qu'à partir de 1.7 on est la méthode préférée (pas bind).

Answer 2

Vous pouvez utiliser onchange événement, quelque chose comme ceci:

$(document).on('change','#your_select',function() { 
    //do something 
}) 

Answer 3

Si vous voulez connaître le type de l'événement, vous pouvez simplement utiliser la propriété type de l'objet event:

$('select').on('change keyup ...', function(event) { 
    var type = event.type; 
    // ... 
});