Y a-t-il un événement onSelect ou équivalent pour HTML<select>?</select>

Question

J'ai un formulaire qui me permet de choisir entre plusieurs options, et de faire quelque chose lorsque l'utilisateur change la sélection. Par exemple,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Maintenant, doSomething() est déclenchée lorsque la sélection changements.

Je veux déclencher doSomething() lorsque l'utilisateur sélectionne une option, peut-être même un nouveau.

J'ai essayé d'utiliser un "onClick" de gestionnaire, mais qui se déclenche avant que l'utilisateur démarre le processus de sélection.

Alors, est-il un moyen de déclencher une fonction sur tous les sélectionner par l'utilisateur?

Mise à jour:

La réponse suggérée par Darryl semblait fonctionner, mais il ne fonctionne pas systématiquement. Parfois, l'événement est déclenché dès que l'utilisateur clique sur le menu déroulant, avant même que l'utilisateur a terminé le processus de sélection!

Answer 1

Voici la façon la plus simple :

Fonctionne aussi bien avec la sélection de la souris et le clavier touches éducatrice sélectionnez haut/bas se concentre.

Answer 2

J’ai besoin de quelque chose exactement la même chose. C’est ce qui a fonctionné pour moi :

Answer 3

J'ai eu le même problème quand j'ai été la création d'un design il y a quelques mois. La solution que j'ai trouvé est d'utiliser .live("change", function()) en combinaison avec d' .blur() sur l'élément que vous utilisez.

Si vous voulez faire quelque chose lorsque l'utilisateur clique simplement, au lieu de changer, il suffit de remplacer change avec click.

J'ai confié ma liste déroulante d'un ID, selected, et utilisé les méthodes suivantes:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

J'ai vu ce n'est pas une réponse sélectionnée, alors j'ai pensé que je donnerais à mon entrée. Cela a fonctionné à merveille pour moi, donc j'espère que quelqu'un d'autre peut utiliser ce code lorsqu'ils se coincent.

http://api.jquery.com/live/

Edit: Utiliser l' on sélecteur de contrairement aux .live. Voir jQuery .sur()

Answer 4

Juste une idée, mais est-ce possible de mettre un onclick sur chacun de la `` éléments ?

---

Une autre option pourrait consister à utiliser onblur sur select. Cela se déclenche chaque fois que l’utilisateur clique sur loin de la sélectionner. À ce stade, vous pouvez déterminer quelle option a été sélectionnée. Pour que ce déclencheur même au bon moment, l’onclick de l’option pourrait brouiller le champ (faire quelque chose d’autre actif ou tout simplement .blur() en jQuery).

Answer 5

Si vous avez vraiment besoin pour fonctionner comme ça, je voudrais faire cela (pour s'assurer qu'il fonctionne au moyen du clavier et de la souris)

• Ajouter un onfocus gestionnaire d'événement pour la sélectionner pour définir le "courant" de la valeur
• Ajouter un gestionnaire d'événements onclick pour la sélectionner pour gérer les changements de la souris
• Ajouter un gestionnaire d'événement onkeypress à le sélectionner pour gérer le clavier changements

Malheureusement, le onclick sera exécuté plusieurs fois (par exemple sur onpening le sélectionner... et sur la sélection/fermer) et le onkeypress feu quand rien ne change...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>