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

Pour développer Vincent Ramdhanie de l' suggestion, jetez un oeil à faire quelque chose comme cela. Essentiellement, vous vous retrouvez avec votre propre fonction jQuery qui vous permettra de réutiliser ailleurs.

Étape 1: Créer la Fonction jQuery

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

Étape 2: assurez-vous que le nouvellement créé Fonction jQuery du fichier est référencé d'utilisation:

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

Étape 3: Utiliser une fonction nouvelle:

$('#MyDropDown').selected(function() {
    //Do Whatever...
});

INFO D'ORIGINE

Avec votre code en cours, la sélection de la même valeur à partir de l'asp:DropDownList ne se déclenche pas l'événement de changement.

Vous pourriez essayer d'ajouter une autre fonction jQuery pour la .le flou de l'événement. Ce serait le feu lorsque le contrôle perd le focus:

$('#dropdownid').blur(function() {......});

Si ils flou ne fonctionne pas pour vous, je voudrais ajouter un bouton actualiser ou quelque chose qui influent sur les feux de la fonction que vous essayez d'utiliser.

Simplement wireup cliquez sur les gestionnaires d'événements de la joint option contrôle au lieu de le sélectionner:

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

Cela se déclenche uniquement lorsque vous sélectionnez une option dans la liste déroulante, indépendamment de savoir si il change.

Beaucoup de solutions actuelles se brisera dans beaucoup de situations. Une solution qui s'appuie sur la vérification sur nombre de fois va être très capricieux.

Certains scénarios à prendre en compte:

• Si vous cliquez sur, puis sur off, puis sur, il comptera deux clics et le feu.
• Dans firefox, vous pouvez ouvrir le menu avec un seul clic de souris et faites glisser l'option choisie, sans jamais soulever votre souris.
• Si vous utilisez une combinaison de touches du clavier, vous êtes susceptible d'obtenir cliquez sur le compteur de synchronisation ou de manquer de l'événement change complètement.
  • Vous pouvez ouvrir la liste déroulante avec Alt+↕ (ou Espace en Chrome et Opera).
  • Lorsque le menu est activé, les touches fléchées va changer la sélection
  • Lorsque le menu est ouvert, en cliquant sur Tab ou Entrée va faire une sélection

Voici une approche plus globale d'extension:

La plus robuste pour voir si une option a été choisie est d'utiliser le modifier événement, que vous pouvez manipuler avec jQuery .modifier() gestionnaire.

La 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 pour voir si il y avait un click ou keyup de l'événement sur la option:selected élément MAIS Chrome, IE et safari ne semblent pas prendre en charge des événements sur éléments, même s'ils sont dans le recommandation du w3c

À l'intérieur de la Select élément semble être une boîte noire. Si vous écoutez les événements sur elle, vous ne pouvez même pas dire sur quel élément de survenue de l'événement, ou si la liste est ouverte ou pas.

La prochaine meilleure chose, puis, semble gérer la blur événement. Cela indique que l'utilisateur a mis l'accent sur le menu déroulant (peut-être vu la liste, peut-être pas) et pris une décision qu'ils voudraient pour coller avec la valeur d'origine. Pour continuer la manipulation des changements tout de suite, nous allons toujours vous abonner à la change événement. Et pour nous assurer de ne pas compter deux fois, nous allons définir un indicateur si le changement événement a été soulevée afin de ne pas le feu à deux reprises:

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);

Ensuite appeler comme ceci:

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

Mise à jour exemple dans jsFiddle

Ce problème que vous rencontrez est dû au client, de la gestion de la base de sélectionner le format HTML. Puisque la plupart des clients ne vont pas marquer un non changement, vous allez devoir essayer quelque chose de différent.

Je serais probablement ajouter un bouton "actualiser" ou quelque chose comme ça, mais je suis un développeur et non un designer, donc je suis probablement faux. 🙂

Pour moi, la solution suivante a bien fonctionné:

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