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

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!

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.

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

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

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

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>

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é.

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>

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 .

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.

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.

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.

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/

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>

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

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.

utilisez jquery:

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

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

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/

vous devriez essayer d'utiliser option:selected

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

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

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

<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.

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>

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>

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

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

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.

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

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 ..

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('');
    }
});

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