onclick on étiquette d'option ne fonctionne pas sur IE et chrome
j'utilise onclick event dans l'option tag pour select box
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclick événement ne fonctionne pas sur IE et Chrome, mais il fonctionne très bien dans firefox,
ici, Je ne veux pas utiliser onchange event sur select tag bcz il ne déclenchera pas un event si l'utilisateur sélectionne à nouveau la même option
par exemple:dire que la première fois que l'utilisateur sélectionne "un" de la liste déroulante j'ai une fenêtre va s'ouvrir après le traitement de certaines choses à l'utilisateur ferme la popup, supposons que si l'utilisateur veut sélectionner le même" un " dropdown, il ne déclenchera aucun événement.ceci peut être résolu en utilisant l'événement onclick sur la balise d'option mais ne fonctionne pas sur IE et chrome
y a-t-il du travail pour ça ?
6 réponses
onclick événement option tag échoue sur la plupart des versions de IE, Safari et Chrome: de référence
si vous voulez déclencher un événement à chaque fois que l'utilisateur 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 utilisateur sélectionné:
<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 garanti 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 à l'événement "clic" sur la balise "select"?
jusqu'à présent, il semble utiliser <select> étiquette est ne fonctionnera pas de façon cohérente dans tous les navigateurs. Cependant, si nous simulons un menu select en utilisant une bibliothèque telle que jQuery UI select menu ou Choisi pour créer un menu de choix au lieu d'utiliser <select> tag click événement sera déclenché sur <ul> ou <li> tag qui est la même dans tous les navigateurs que j'ai testé.
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 choisi la même option à deux reprises. Le problème est QU'IE affichera l'option vide (il ignore l'attribut style), mais le fait de cliquer dessus ne déclenchera pas l'événement, car il commence toujours par être sélectionné, et donc le fait de le sélectionner ne déclenche pas onchange...
cela émule un onclick événement sur votre option s en enregistrant le nombre de clics.
- le premier clic est ignoré (utilisé pour étendre votre dropdown),
- le second clic est effectivement votre"sélection". (Le nombre de clics est alors réinitialisé).
Il ne répond pas pour l'interaction du clavier bien....
Oh, et je suis en train de faire l'utilisation de JQuery, mais vous pourriez re-faire à l'aide de pure JS
Vous avez juste à
- placez le script au-dessus du select,
- définir onclick et onblur pour sélectionner comme indiqué dans le code
- et personnaliser la fonction de contrôle.
Je l'ai testé et il fonctionne :).
<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>
j'ai trouvé que ce qui suit a fonctionné pour moi - à la place sur l'utilisation sur le clic, l'utilisation sur le changement par exemple:
jQuery('#element select').on('change', (function() {
//your code here
}));
Utiliser function(this) id de la balise select
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>