Existe-t-il un événement onSelect ou équivalent pour HTML <select>?


214

J'ai un formulaire de saisie qui me permet de choisir parmi plusieurs options et de faire quelque chose lorsque l'utilisateur modifie la sélection. Par exemple,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Désormais, doSomething()ne se déclenche que lorsque la sélection change .

Je veux déclencher doSomething()lorsque l'utilisateur sélectionne une option, éventuellement la même à nouveau.

J'ai essayé d'utiliser un gestionnaire "onClick", mais cela se déclenche avant que l'utilisateur ne commence le processus de sélection.

Alors, existe-t-il un moyen de déclencher une fonction à chaque sélection par l'utilisateur?

Mettre à jour:

La réponse suggérée par Darryl semblait fonctionner, mais elle ne fonctionne pas de manière cohérente. Parfois, l'événement est déclenché dès que l'utilisateur clique sur le menu déroulant, avant même que l'utilisateur ait terminé le processus de sélection!


1
Je peux comprendre pourquoi vous le pensez. Je serai bref. Il y a deux entrées sur mon formulaire. Ville (champ de texte) et État (sélection). Initialement, une ville et son état sont affichés. Lorsque l'utilisateur sélectionne un état, un filtre de recherche élargit quelque part son champ d'application à «l'échelle de l'État» au lieu de «spécifique à la ville».
ePharaoh

9
strager, ce n'est pas un élément d'interface utilisateur rare. est parfaitement logique dans certaines situations. un autre exemple serait de composer un e-mail de masse, puis vous avez une liste déroulante à droite avec des "champs spéciaux" que vous pouvez ajouter rapidement dans l'e-mail, prénom, lien de désinscription, etc.
Brian Armstrong

2
juste comme une note latérale ... pour les événements en ligne comme onclick, onchange etc. vous n'avez pas besoin du préfixe de protocole "javascript:". on {event} = "doSomething ();" est très bien.
scunliffe

non testé: que diriez-vous d'onClick mais appliqué aux balises d'option? évidemment via une classe, de manière discrète
The Disintegrator

6
@The Disintegrator Utiliser uniquement des événements de clic ne parvient pas à gérer le cas d'utilisation où vous sélectionnez une option via le clavier. (Sachez que c'est une ancienne question - à ajouter pour les futurs visiteurs ...)
peteorpeter

Réponses:


85

Voici le moyen le plus simple:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Fonctionne à la fois avec la sélection de la souris et les touches haut / bas du clavier lorsque la sélection est focalisée.


36
Mais cela ne fera rien "lorsque l'utilisateur sélectionne ... le même à nouveau", non?
LarsH

3
Notez que le commentaire de @KayZhu n'est qu'à moitié correct: la bonne chose à faire est de vérifier que "selectedIndex" est supérieur ou égal à zéro (ou supérieur à -1). Il n'y a pas de fonction "type ()" et "selectedIndex" ne le sera jamais de undefinedtoute façon.
Pointy

2
@TJCrowder Vous avez raison - vous ne savez pas à quoi je pensais quand j'ai écrit la seconde moitié. J'ai supprimé le commentaire d'origine et dans le but de ne pas confondre les autres, voici le commentaire d'origine (veuillez noter que la première moitié est correcte et la deuxième partie est fausse): cela ne fonctionnera pas comme prévu pour la première option qui a l'index 0: 0 est faux dans JS donc doSomething () ne sera pas exécuté. Au lieu de cela, utilisezif(type(this.selectedIndex) != undefined; doSomething()
KZ

14
Cette réponse a le plus de votes positifs, mais elle ne résout pas le problème! La doSomething()fonction n'est pas déclenchée lorsque l'utilisateur sélectionne l'option déjà sélectionnée. Voir ce plunk , où la couleur d'arrière-plan ne change que si vous sélectionnez une option différente de celle actuellement sélectionnée.
skot

FWIW: Si vous souhaitez uniquement invoquer doSomething()lorsqu'une option spécifique est sélectionnée, par exemple "option 3" dans l'exemple ci-dessus, utilisez if (this.selectedIndex==4)où le nombre "4" représente l' index numérique des options, PAS celui spécifié value! (c'est-à-dire que "l'option 3" est la quatrième option de <select name="ab">).
rvrvrv

66

J'avais besoin de quelque chose exactement pareil. C'est ce qui a fonctionné pour moi:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Prend en charge ceci:

lorsque l'utilisateur sélectionne une option, éventuellement la même à nouveau


4
jsfiddle.net/ecmanaut/335XK fonctionne dans osx Chrome 30, Safari 6, Firefox 17.
ecmanaut

2
Fonctionne également sous Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 et IE6. Jsfiddle ou IE shenanigans vous obligent à utiliser fiddle.jshell.net/ecmanaut/335XK/show/light directement pour juste le test, cependant - leur vue d'éditeur ne parvient pas à charger jQuery utilisé dans l'exemple pour la lisibilité. Tout ci-dessus vient d'être testé avec l'interaction avec la souris; pour rendre ce clavier convivial, ce hack nécessite probablement un travail supplémentaire, car au moins les anciens IE déclenchent joyeusement l'événement de changement avant que vous n'ayez eu la possibilité de choisir "C".
ecmanaut du

3
Très bon conseil ,. m'a aidé à résoudre l'incapacité de sélectionner la première option
naoru

7
Si une valeur est déjà sélectionnée, la tabulation à travers cela causera des problèmes. Dès que le champ est parcouru, la valeur disparaît, ce qui est un comportement utilisateur assez inattendu. De plus, lorsque vous tabulez, vous aurez perdu la sélection, même si vous n'avez rien fait de tel. Sinon, de bonnes idées.
KyleMit

1
Utilisez par exemple jQuery .blur () pour restaurer la sélection d'origine si elle est -1 au point de perdre le focus.
mheinzerling

12

J'ai eu le même problème lorsque je créais un design il y a quelques mois. La solution que j'ai trouvée était d'utiliser .live("change", function())en combinaison avec .blur()l'élément que vous utilisez.

Si vous souhaitez qu'il fasse quelque chose lorsque l'utilisateur clique simplement, au lieu de changer, remplacez simplement changepar click.

J'ai attribué un ID à ma liste déroulante et j'ai selectedutilisé les éléments suivants:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

J'ai vu que celle-ci n'avait pas de réponse sélectionnée, alors j'ai pensé que je donnerais ma contribution. Cela a très bien fonctionné pour moi, donc j'espère que quelqu'un d'autre pourra utiliser ce code quand il sera bloqué.

http://api.jquery.com/live/

Modifier: utilisez le onsélecteur par opposition à .live. Voir jQuery .on ()


Merci! .blur () aide. Dans IE7, l'événement de modification de jQuery est déclenché deux fois s'il n'y a pas de .blur () dans le code.
tirage le

7
Comment cela résout-il le problème exprimé dans la question, c'est-à-dire que rien ne se passe tant que la sélection n'est pas modifiée ?
LarsH

2
@LarsH cela fait plusieurs années depuis cette question, je ne sais pas - j'ai peut-être mal lu la question et j'ai été confus.
Cody

Pour tous ceux qui cherchent maintenant, .live a été entièrement supprimé à partir de la version 1.9 api.jquery.com/live/#live-events-handler . Utilisez .Modification comme raccourci api.jquery.com/change/#change-handler
parttimeturtle

9

Juste une idée, mais est-il possible de mettre un onclick sur chacun des <option>éléments?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

Une autre option pourrait être d'utiliser onblur sur la sélection. Cela se déclenchera chaque fois que l'utilisateur cliquera sur la sélection. À ce stade, vous pouvez déterminer quelle option a été sélectionnée. Pour que cela se déclenche même au bon moment, le clic de l'option pourrait brouiller le champ (rendre autre chose actif ou simplement .blur () dans jQuery).


1
Zut! "pourquoi n'ai-je pas pensé à ce moment". Merci!
ePharaoh

@Darryl Cela n'a pas vraiment fonctionné comme prévu. Parfois, l'événement est déclenché avant même que l'utilisateur ne termine la sélection. Voir la mise à jour que j'ai ajoutée à la question.
ePharaoh le

8
Mettre les gestionnaires d'événements sur les options échouera dans toutes les versions d'IE! webbugtrack.blogspot.com/2007/11/…
scunliffe

8
échoue aussi dans le chrome :)
thinklinux

Fonctionne dans Firefox.
lezsakdomi

6

L'approche onclick n'est pas entièrement mauvaise, mais comme dit, elle ne sera pas déclenchée lorsque la valeur n'est pas modifiée par un clic de souris.
Il est cependant possible de déclencher l'événement onclick dans l'événement onchange.

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

5

Je vais développer la réponse de jitbit. Je l'ai trouvé bizarre lorsque vous avez cliqué sur la liste déroulante, puis sur la liste déroulante sans rien sélectionner. A fini avec quelque chose comme:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

Cela a un peu plus de sens pour l'utilisateur et permet à JavaScript de s'exécuter à chaque fois qu'il sélectionne une option, y compris une option antérieure.

L'inconvénient de cette approche est qu'elle rompt la possibilité de tabuler sur une liste déroulante et d'utiliser les touches fléchées pour sélectionner la valeur. C'était acceptable pour moi puisque tous les utilisateurs cliquent sur tout tout le temps jusqu'à la fin de l'éternité.


Vous pouvez vous débarrasser des avertissements d'accessoires en passant à la thisplace de $(this). Cependant, je n'obtiens pas tout le comportement prévu de ceci; il n'alerte pas lorsque je re-sélectionne la même option.
Noumenon

1
Remarque: onchange est déclenché lors de l'ajout d'options de suppression à une zone de sélection via JS. Pas seulement lorsqu'un utilisateur sélectionne un élément
zanderwar

@Noumenon J'ai corrigé les erreurs si cela est toujours utile. Je pense que je testais cela dans l'application elle-même et quand je l'ai copiée, j'ai oublié de renommer une variable. Devrait fonctionner dans l'éditeur et avoir plus de sens maintenant.
Tyler Stahlhuth,

4

Si vous en avez vraiment besoin pour fonctionner comme ça, je le ferais (pour vous assurer que cela fonctionne au clavier et à la souris)

  • Ajoutez un gestionnaire d'événements onfocus à la sélection pour définir la valeur "actuelle"
  • Ajouter un gestionnaire d'événements onclick à la sélection pour gérer les modifications de la souris
  • Ajouter un gestionnaire d'événements onkeypress à la sélection pour gérer les modifications du clavier

Malheureusement, onclick s'exécutera plusieurs fois (par exemple à l'ouverture de la sélection ... et à la sélection / fermeture) et onkeypress peut se déclencher lorsque rien ne change ...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

4

Pour déclencher correctement un événement chaque fois que l'utilisateur sélectionne quelque chose (même la même option), il vous suffit de tromper la case de sélection.

Comme d'autres l'ont dit, spécifiez un négatif selectedIndex sur le focus pour forcer l'événement de changement. Bien que cela vous permette de tromper la boîte de sélection, cela ne fonctionnera pas après cela tant qu'il reste concentré. La solution simple consiste à forcer le flou de la zone de sélection, comme illustré ci-dessous.

JS / HTML standard:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Plugin jQuery:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

Vous pouvez voir une démo fonctionnelle ici .


Cela fonctionne avec Chrome, mais pas avec IE9: lorsque je clique sur le contrôle, son texte disparaît et il n'est pas déroulant.
ChrisW

Le problème avec cela est qu'il annule la sélection actuelle. Si la sélection actuelle est B et que je clique sur le menu déroulant, la coche apparaît à côté de A! Mais A n'est pas vraiment sélectionné, car si je fais glisser le menu et relâche le bouton de la souris (abandon du menu), la sélection devient vide. La sélection devient également vide si vous accédez au menu déroulant, ce que vous pourriez facilement faire si vous étiez en train de passer à une autre partie du formulaire, sans vous attendre à faire des dégâts en cours de route. (Appuyez sur l'onglet sur votre jsfiddle et vous verrez ce que je veux dire.)
skot

3

En fait, les événements onclick ne se déclenchent PAS lorsque l'utilisateur utilise le clavier pour modifier la sélection dans le contrôle de sélection. Vous devrez peut-être utiliser une combinaison de onChange et onClick pour obtenir le comportement que vous recherchez.


Oui, je le devrais .. mais le problème auquel je suis confronté est un problème orthogonal distinct à la préoccupation que vous soulevez. L'événement onclick sur <option> est déclenché avant même que l'utilisateur ne termine sa sélection, ce qui semble rendre son utilisation impossible.
ePharaoh

Les événements se déclenchent dans Chrome lorsque vous appuyez sur Entrée après avoir déplacé la sélection vers un nouvel élément
Gene Golovchinsky

3

Cela peut ne pas répondre directement à votre question, mais ce problème peut être résolu par de simples ajustements au niveau de la conception. Je comprends que cela peut ne pas être applicable à 100% à tous les cas d'utilisation, mais je vous exhorte fortement à envisager de repenser votre flux d'utilisateurs de votre application et si la suggestion de conception suivante peut être mise en œuvre.

J'ai décidé de faire quelque chose de simple que les alternatives de piratage pour l' onChange()utilisation d' autres événements qui ne sont pas vraiment destinés à cet effet ( blur, click, etc.)

La façon dont je l'ai résolu:

Préparez simplement une balise d'option d'espace réservé, telle que select, qui n'a aucune valeur.

Ainsi, au lieu d'utiliser simplement la structure suivante, qui nécessite des alternatives de piratage:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Pensez à utiliser ceci:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Ainsi, de cette façon, votre code est beaucoup plus simplifié et onChangefonctionnera comme prévu, chaque fois que l'utilisateur décide de sélectionner autre chose que la valeur par défaut. Vous pouvez même ajouter l' disabledattribut à la première option si vous ne voulez pas qu'ils le sélectionnent à nouveau et les forcer à sélectionner quelque chose dans les options, déclenchant ainsi un onChange()incendie.

Au moment de cette réponse, j'écris une application Vue complexe et j'ai trouvé que ce choix de conception a beaucoup simplifié mon code. J'ai passé des heures sur ce problème avant de m'installer avec cette solution et je n'ai pas eu à réécrire beaucoup de mon code. Cependant, si je suis allé avec les alternatives hacky, j'aurais dû tenir compte des cas de bord, pour éviter le double tir des demandes ajax, etc. navigateurs également).

Parfois, il vous suffit de prendre du recul et de penser à la situation dans son ensemble pour la solution la plus simple.


2

Ce que j'ai fait face à un problème similaire, c'est que j'ai ajouté un «onFocus» à la boîte de sélection qui ajoute une nouvelle option générique («sélectionnez une option» ou quelque chose de similaire) et que je la sélectionne par défaut comme option sélectionnée.


2

Mon objectif était donc de pouvoir sélectionner plusieurs fois la même valeur, ce qui écrase essentiellement la fonction onchange () et la transforme en une méthode onclick () utile.

Sur la base des suggestions ci-dessus, j'ai trouvé cela qui fonctionne pour moi.

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/


2
Même inconvénient qu'avec les autres onfocus="this.selectedIndex=-1"solutions: la sélection actuelle est annulée si vous accédez au composant par tabulation ou si vous quittez le menu sans rien sélectionner. Appuyez sur tab sur votre violon pour voir ce que je veux dire. (Notez également que vous obtenez une valeur vide et non '-' lorsque vous faites cela. C'est parce que selectedIndex=-1cela ne vous permet pas <option value="-1">; ce serait une légère amélioration ici à utiliser onfocus="this.selectedIndex=0". C'est une solution de contournement à moitié décente, mais je ne le fais pas comme perdre la sélection actuelle juste parce que j'ai jeté un œil au menu, ou même simplement y
tabuler

2

tout d'abord, utilisez onChange comme gestionnaire d'événements, puis utilisez la variable indicateur pour lui faire faire la fonction que vous voulez à chaque fois que vous effectuez un changement

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}
<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>


2

Ajoutez une option supplémentaire en premier, comme l'en-tête d'une colonne, qui sera la valeur par défaut du bouton déroulant avant de cliquer dessus et réinitialiser à la fin de doSomething(), donc lorsque vous choisissez A / B / C, l'événement onchange se déclenche toujours, lorsque la sélection est terminée State, ne faites rien et revenez. onclickest très instable comme beaucoup de personnes l'ont mentionné auparavant. Donc, tout ce que nous devons faire est de créer une étiquette de bouton initiale qui soit différente de vos véritables options afin que le changement fonctionne sur n'importe quelle option.

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

1

La chose merveilleuse à propos de la balise select (dans ce scénario) est qu'elle récupérera sa valeur à partir des balises d'option.

Essayer:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

A fonctionné convenablement pour moi.


1

utilisez jquery:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

1

Voici ma solution, complètement différente de toute autre ici. Il utilise la position de la souris pour déterminer si une option a été cliquée au lieu de cliquer sur la case de sélection pour ouvrir la liste déroulante. Il utilise la position event.screenY car c'est la seule variable cross browser fiable. Un événement de survol doit être attaché en premier afin qu'il puisse déterminer la position des contrôles par rapport à l'écran avant l'événement de clic.

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

Voici mon jsFiddle http://jsfiddle.net/sU7EV/4/


1
Ne fonctionne pas dans Safari ou Chrome pour OS X. L'alerte n'est jamais déclenchée.
skot

1

vous devriez essayer d'utiliser option:selected

$("select option:selected").click(doSomething);

1

Ce qui fonctionne pour moi:

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

De cette façon, onchange appelle «doSomething ()» lorsque l'option change et onclick appelle «doSomething ()» lorsque l'événement onchange est faux, en d'autres termes, lorsque vous sélectionnez la même option


Ne fonctionne pas pour moi dans Safari ou Chrome pour OS X. jsfiddle.net/drskot/wLvL4pkw
skot

1

Essayez ceci (événement déclenché exactement lorsque vous sélectionnez une option, sans changer d'option):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4


1
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

Ici, l'index est renvoyé et dans le code js, vous pouvez utiliser ce retour avec un commutateur ou tout ce que vous voulez.


0

Essaye ça:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

0

Il y a longtemps maintenant, mais en réponse à la question initiale, cela aiderait-il? Mettez juste onClickdans la SELECTligne. Mettez ensuite ce que vous voulez que chacun OPTIONfasse dans les OPTIONlignes. c'est à dire:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

0
<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

0

J'avais fait face à un besoin similaire et j'ai fini par écrire une directive angularjs pour le même -

lien guthub - sélection angulaire

Utilisé element[0].blur();pour supprimer le focus de la balise de sélection. La logique consiste à déclencher ce flou au deuxième clic de la liste déroulante.

as-select est déclenché même lorsque l'utilisateur sélectionne la même valeur dans la liste déroulante.

DEMO - lien


0

La seule vraie réponse est de ne pas utiliser le champ de sélection (si vous devez faire quelque chose lorsque vous resélectionnez la même réponse.)

Créez un menu déroulant avec div conventionnel, bouton, menu afficher / masquer. Lien: https://www.w3schools.com/howto/howto_js_dropdown.asp

Cela aurait pu être évité si l'on avait pu ajouter des écouteurs d'événements aux options. S'il y avait eu un écouteur onSelect pour l'élément select. Et si le fait de cliquer sur le champ de sélection n'a pas aggravé le déclenchement de mousedown, mouseup et de cliquer en même temps sur mousedown.


0

Il y a quelques choses que vous voulez faire ici pour vous assurer qu'il se souvient des anciennes valeurs et déclenche un événement onchange même si la même option est à nouveau sélectionnée.

La première chose que vous voulez est un événement onChange régulier:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

Pour que l'événement onChange se déclenche même lorsque la même option est à nouveau sélectionnée, vous pouvez annuler l'option sélectionnée lorsque la liste déroulante reçoit le focus en la définissant sur une valeur non valide. Mais vous souhaitez également stocker la valeur précédemment sélectionnée pour la restaurer au cas où l'utilisateur ne sélectionnerait aucune nouvelle option:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

Le code ci-dessus vous permettra de déclencher un changement même si la même valeur est sélectionnée. Toutefois, si l'utilisateur clique en dehors de la zone de sélection, vous souhaitez restaurer la valeur précédente. Nous le faisons sur onBlur:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

-1

Veuillez noter que les gestionnaires d'événements ne sont pas pris en charge pour la balise OPTION sur IE, avec une réflexion rapide .. J'ai trouvé cette solution, essayez-la et donnez-moi vos commentaires:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Ce que je fais ici est en fait de réinitialiser l'index de sélection afin que l'événement onchange soit toujours déclenché, c'est vrai que vous perdez l'élément sélectionné lorsque vous cliquez et cela peut être ennuyeux si votre liste est longue, mais cela peut vous aider d'une manière ou d'une autre ..


-1

qu'en est-il de la modification de la valeur de la sélection lorsque l'élément gagne le focus, par exemple (avec jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

-1

J'ai découvert cette solution.

définissez le selectedIndex de l'élément select sur 0 initialement

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

appeler cette méthode événement onChange

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.