web-dev-qa-db-fra.com

onclick sur la balise option ne fonctionne pas sur IE et chrome

J'utilise onclick événement dans la balise d'option pour la boîte select

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclick l'événement ne fonctionne pas sur IE et Chrome mais il fonctionne bien dans firefox, ici je ne veux pas utiliser onchange événement sur la balise select bcz, il ne déclenchera pas d'événement si l'utilisateur sélectionne à nouveau la même option

Par exemple: disons que la première fois que l'utilisateur sélectionne "une" liste déroulante, j'ouvrirai une fenêtre contextuelle après avoir traité certaines choses, l'utilisateur ferme la fenêtre contextuelle, supposons que si l'utilisateur souhaite sélectionner la même liste déroulante "un", il ne déclenchera aucun événement. Cela peut être résolu en utilisant l'événement onclick sur la balise option mais ne fonctionne pas sur IE et chrome

Y a-t-il du travail pour cela?

htmlhtml-select
25
Lohith MV

L'événement onclick sur la balise option échouera sur la plupart des versions d'IE, Safari et Chrome: référence

Si vous souhaitez déclencher un événement chaque fois que l'utilisateur le sélectionne, pourquoi ne pas simplement utiliser:

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

Et si vous voulez faire quelque chose avec l'option spécifique sélectionnée par l'utilisateur:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

De cette façon, vous êtes assuré d'appeler check() si et seulement si une option est sélectionnée.

Edit: Comme @ user422543 l'a souligné dans les commentaires, cette solution ne fonctionnera pas dans Firefox. J'ai donc posé une autre question ici: Pourquoi Firefox réagit-il différemment de Webkit et IE pour "cliquer" l'événement sur la balise "select"?

Jusqu'à présent, il semble que l'utilisation de la balise <select> Ne fonctionnera pas de manière cohérente dans tous les navigateurs. Cependant, si nous simulons un menu de sélection à l'aide d'une bibliothèque telle que menu de sélection jQuery UI ou Chosen pour créer un menu de sélection au lieu d'utiliser la balise <select>, click sera déclenché sur la balise <ul> Ou <li> Qui est cohérente dans tous les navigateurs que j'ai testés.

41
K Z

J'ai une autre suggestion, ce n'est pas 100%, mais presque:

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

De cette façon, l'événement sera déclenché même si l'utilisateur a sélectionné deux fois la même option. L'attelage est que IE affichera l'option vide (il ignore l'attribut style), mais cliquer dessus ne déclenchera pas l'événement, car il commence toujours comme étant sélectionné, et donc le sélectionner ne pas déclencher onchange ...

3
mamashare

Cela émule un événement onclick sur vos options en enregistrant le nombre de clics.

http://jsfiddle.net/yT6Y5/1/

  • Le premier clic est ignoré (utilisé pour développer votre liste déroulante),
  • Le deuxième clic est effectivement votre "sélection". (Le nombre de clics est ensuite réinitialisé).

Cependant, il ne prend pas en charge l'interaction avec le clavier ....

Oh et j'utilise JQuery, mais vous pouvez le refaire en utilisant du JS pur

2
Greg

Il suffit de

  • mettez le script au-dessus de la sélection,
  • définir onclick et onblur pour sélectionner comme indiqué dans le code
  • et personnaliser la fonction de vérification.

Je l'ai testé et ça marche :).

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>
1
Michael

Utilisez function(this) dans l'ID de la balise de sélection

par exemple

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            Prompt($('select option:selected').text());
        }
    });
});
</script>
0
kali doss

J'ai trouvé que ce qui suit fonctionnait pour moi - au lieu d'utiliser sur le clic, utilisez sur le changement par exemple:

jQuery('#element select').on('change',  (function() {

   //your code here

}));
0
Elina Lulle

Ce code ne fonctionne pas dans Google Chrome mais fonctionne dans Mozilla.

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

Cette solution fonctionne dans Chrome et Mozilla. Je n'ai pas testé dans Safari .;

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>
0
OguzTR