web-dev-qa-db-fra.com

Déclenche un événement chaque fois qu'un élément DropDownList est sélectionné avec jQuery

J'ai une liste déroulante: <asp:DropDownList id="dropdownid" runat="server" class=blah"/>

dans ma jQuery, j'attribue un événement de changement comme ceci:

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

Maintenant, cela fonctionne lorsque je sélectionne une valeur différente dans la liste déroulante, mais disons que je veux sélectionner à nouveau la même valeur. (parce que je veux faire un autre appel avec la même valeur) Donc, quand je le sélectionne à nouveau, (sans changer la valeur) simplement en cliquant sur la valeur sélectionnée dans la liste déroulante et en la "sélectionnant" à nouveau, aucun événement ne se déclenche. Y a-t-il un autre événement dans jquery que je dois lui assigner? quelle est la solution?

jqueryhtml-select
34
ra170

Pour développer suggestion de Vincent Ramdhanie, jetez un œil à faire quelque chose comme ça. Essentiellement, vous vous retrouvez avec votre propre fonction jQuery que vous pouvez 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 fichier de la fonction jQuery nouvellement créé est référencé pour utilisation:

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

Étape 3 : utilisez la nouvelle fonction:

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

INFO ORIGINALE
Avec votre base de code actuelle, la sélection de la même valeur dans asp: DropDownList ne déclenchera pas l'événement de modification.

Vous pouvez essayer d'ajouter une autre fonction jQuery pour l'événement .blur. Cela se déclencherait lorsque le contrôle perd le focus:

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

S'ils brouillent la fonction ne fonctionne pas pour vous, j'ajouterais un bouton de rafraîchissement ou quelque chose qui affecterait la fonction que vous essayez d'utiliser.

28
RSolberg

Essaye ça:

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

Vous créez d'abord un nombre de clics variable pour suivre le nombre de clics car vous ne voulez pas que l'événement se déclenche chaque fois que l'utilisateur clique sur la liste déroulante. Le deuxième clic est la sélection que l'utilisateur fait.

Si le nombre de clics se trouve être égal à 2, il s'agit d'un deuxième clic, alors déclenchez l'événement et réinitialisez le nombre de clics à 0 pour la prochaine fois. Sinon, ne faites rien.

16
Vincent Ramdhanie

Il vous suffit de cliquer sur les gestionnaires d'événements pour les contrôles d'options inclus au lieu de sélectionner:

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

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

7
Adam Lassek

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

Quelques scénarios à considérer:

  • Si vous cliquez sur, puis sur désactivé, puis de nouveau sur, il comptera les deux clics et le tir.
  • Dans Firefox, vous pouvez ouvrir le menu d'un simple clic de souris et faire glisser vers l'option choisie sans jamais soulever votre souris.
  • Si vous utilisez n'importe quelle combinaison de touches du clavier, vous risquez de désynchroniser le compteur de clics ou de manquer complètement l'événement de modification.
    • Vous pouvez ouvrir la liste déroulante avec Alt+↕ (ou la Spacebar dans Chrome et Opera).
    • Lorsque la liste déroulante est active, l'une des touches fléchées modifie la sélection
    • Lorsque le menu déroulant est ouvert, cliquez sur Tab ou Enter fera une sélection

Voici une extension plus complète:

Le moyen le plus robuste pour voir si une option a été sélectionnée est d'utiliser l'événement change , que vous pouvez gérer avec jQuery .change() gestionnaire.

La seule chose qui reste à faire est de déterminer si l'élément d'origine a été sélectionné à nouveau.
Cela a été beaucoup demandé ( n , deux , trois ) sans grande réponse dans aucune situation.

La chose la plus simple à faire serait de vérifier s'il y avait un événement click ou keyup sur le option:selected element MAIS Chrome, IE et safari ne semblent pas prendre en charge les événements sur les éléments option, 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 dessus, 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 semble alors gérer l'événement blur. Cela indiquera que l'utilisateur s'est concentré sur la liste déroulante (peut-être vu la liste, peut-être pas) et a pris la décision de conserver la valeur d'origine. Pour continuer à gérer les modifications immédiatement, nous nous abonnerons toujours à l'événement change. Et pour nous assurer que nous ne comptons pas deux fois, nous définirons un indicateur si l'événement change a été déclenché afin que nous ne renvoyions pas 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);

Appelez ensuite comme ceci:

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

Exemple mis à jour dans jsFiddle

3
KyleMit

Selon API :

L'événement change se déclenche lorsqu'un contrôle perd le focus d'entrée et que sa valeur a été modifiée depuis qu'il a gagné le focus.

Vous pouvez essayer le mousedown ou cliquer sur les événements comme alternative.

3
ern

Découvrez 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");
            }
        });
    });
});

J'espère que cela t'aides

2
user186816

Pour moi, la solution suivante a bien fonctionné:

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

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 menu déroulant à une valeur par défaut comme "Sélectionner ...", chaque fois qu'une action requise est terminée. Ainsi, si l'utilisateur doit exécuter l'action A deux fois, la liste déroulante se réinitialise après chaque action.

  1. L'utilisateur sélectionne l'action A dans la liste déroulante.
  2. L'action A est exécutée et la liste déroulante est réinitialisée.
  3. L'utilisateur sélectionne l'action A dans la liste déroulante.
  4. L'action A est exécutée et la liste déroulante est réinitialisée.

J'espère que cela t'aides,

Riches

0
kim3er

Ce problème que vous rencontrez est dû à la gestion par le client du HTML de sélection de base. Étant donné que la plupart des clients ne signaleront pas un non-changement, vous devrez essayer quelque chose de différent.

J'ajouterais probablement un bouton "rafraîchir" ou quelque chose comme ça, mais je suis développeur et non concepteur, donc je me trompe probablement. :)

0
Craig