Événement de feu chaque fois qu'un élément DropDownList est sélectionné avec jQuery

essayez ceci:

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

tout d'abord, vous créez une variable clicknum pour suivre le nombre de clics parce que vous ne voulez pas que l'événement se déclenche chaque fois que l'utilisateur clique sur la boîte de dépôt. Le deuxième clic est la sélection que l'utilisateur fait.

si click num se trouve être 2 alors il s'agit d'un second click alors tirez l'événement et réinitialisez clicknum à 0 pour la prochaine fois. Sinon ne rien faire.

cliquez simplement sur gestionnaires d'événements à l'option ci-jointe contrôles au lieu de la select:

$('#dropdownid option').click(function() {......});

cela ne se déclenche que lorsque vous sélectionnez une option dans la liste déroulante, qu'elle change ou non.

selon la API :

l'événement de changement perd le focus input et sa valeur a été modifié depuis l'accès à l'accent.

, Vous pourriez vouloir essayer le mousedown ou cliquez sur événements comme une alternative.

beaucoup de solutions actuelles se brisera dans beaucoup de situations. Toute solution qui s'appuie sur la vérification du nombre de clics deux fois sera très inconstante.

Certains scénarios à prendre en compte:

• si vous cliquez sur, puis sur, puis de retour sur, il comptera les clics et le feu.
• dans firefox, vous pouvez ouvrir le menu avec un simple clic de souris et faire glisser vers l'option choisie sans jamais lever votre souris.
• si vous utilisez n'importe quelle combinaison de touches de clavier vous êtes susceptible d'obtenir le Click counter hors de la synchronisation ou manquer l'événement de changement tout à fait.
  • vous pouvez ouvrir la liste avec Alt + ↕ (ou la Spacebar en Chrome et Opéra).
  • lorsque la liste déroulante a la mise au point, n'importe laquelle des touches fléchées changera la sélection
  • lorsque le le menu déroulant est ouvert, en cliquant sur onglet ou entrer fera une sélection

voici une extension plus complète:

la manière la plus robuste de voir si une option a été sélectionnée est d'utiliser l'événement change , que vous pouvez gérer avec le handler .change() de jQuery.

le seule chose restant à faire est de déterminer si l'élément d'origine a été sélectionné à nouveau.

Cela a demandé beaucoup ( un , deux , trois ), sans grande réponse dans n'importe quelle situation.

la chose la plus simple à faire serait de vérifier s'il y avait un click ou keyup événement sur le option:selected élément mais Chrome, IE, et safari ne semblent pas soutenir les événements sur option éléments , même s'ils sont dans le recommandation w3c

à l'intérieur de l'élément Select semble être une boîte noire. Si vous écoutez des événements qui s'y trouvent, vous ne pouvez même pas dire sur quel élément l'événement s'est produit ou si la liste était ouverte ou non.

la prochaine meilleure chose alors, semble gérer l'événement blur . Cela indique que le l'utilisateur s'est concentré sur le dropdown (peut-être vu la liste, peut-être pas) et a pris une décision qu'ils aimeraient s'en tenir à la valeur originale. Pour continuer à gérer les changements tout de suite, nous nous abonnerons toujours à l'événement change . Et pour s'assurer que nous ne comptions pas deux fois, nous placerons un drapeau si l'événement de changement a été soulevé de sorte que nous ne tirons pas en arrière deux fois:

Code:

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

alors appelez comme ceci:

$("#dropdownid").selected(function (e) {
    alert('You selected ' + $(e).val());
});

exemple mis à jour dans jsFiddle

Regardez cette solution:

http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

Espérons que cette aide

ce problème que vous rencontrez est dû à la manipulation par le client de la base sélectionnez HTML. Puisque la plupart des clients ne vont pas marquer un non changement, vous allez devoir essayer quelque chose de différent.

je voudrais probablement ajouter un bouton" rafraîchir " ou quelque chose comme ça, mais je suis un développeur et pas un designer donc je suis probablement tort. :)

L'élément sélectionné d'une liste déroulante est là pour refléter un choix déjà fait.

ma suggestion est de réinitialiser le dropdown à une valeur par défaut comme" Select..."chaque fois qu'une action requise est terminé. Ainsi, si l'utilisateur doit effectuer une Action deux fois, le dropdown serait réinitialisé après chaque action.

1. l'utilisateur sélectionne L'Action A à partir de la liste déroulante.
2. Action A est exécutée et la réduction est réinitialisée.
L'utilisateur
3. sélectionne L'Action A à partir de la liste déroulante.
4. Action A est exécutée et la réduction est réinitialisée.

Espère que cette aide,

Riche

pour moi, la solution suivante a bien fonctionné:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});

aussi:

$('#dropdownid select option').click(function() {
   ....
}