Is there an onSelect event or equivalent for HTML select

Question

I have an input form that lets me select from multiple options  and do something when the user changes the selection  Eg    lt select onChange  javascript doSomething     gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    Now  doSomething   only gets triggered when the selection changes   I want to trigger doSomething   when the user selects any option  possibly the same one again   I have tried using an  onClick  handler  but that gets triggered before the user starts the selection process   So  is there a way to trigger a function on every select by the user   Update   The answer suggested by Darryl seemed to work  but it doesn t work consistently  Sometimes the event gets triggered as soon as user clicks the drop-down menu  even before the user has finished the selection process

User · Answer

What I did when faced with a similar Problem is I added an  onFocus  to the select box which appends a new generic option   select an option or something similar  and default it as the selected option

User · Answer

I needed something exactly the same  This is what worked for me    lt select onchange  doSomething     onfocus  this selectedIndex   -1   gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    Supports this      when the user selects any option  possibly the same one again

User · Answer

This may not directly answer your question  but this problem could be solved by simple design level adjustments  I understand this may not be 100  applicable to all use-cases  but I strongly urge you to consider re-thinking your user flow of your application and if the following design suggestion can be implemented   I decided to do something simple than hacking alternatives for onChange   using other events that were not really meant for this purpose  blur  click  etc    The way I solved it   Simply pre-pend a placeholder option tag such as select that has no value to it   So  instead of just using the following structure  which requires hack-y alternatives    lt select gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    Consider using this    lt select gt     lt option selected  selected  gt Select    lt  option gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    So  this way  your code is a LOT more simplified and the onChange will work as expected  every time the user decides to select something other than the default value  You could even add the disabled attribute to the first option if you don t want them to select it again and force them to select something from the options  thus triggering an onChange   fire   At the time of this answer  I m writing a complex Vue application and I found that this design choice has simplified my code a lot  I spent hours on this problem before I settled down with this solution and I didn t have to re-write a lot of my code  However  if I went with the hacky alternatives  I would have needed to account for the edge cases  to prevent double firing of ajax requests  etc  This also doesn t mess up the default browser behaviour as a nice bonus  tested on mobile browsers as well    Sometimes  you just need to take a step back and think about the big picture for the simplest solution

User · Answer

I had the same problem when I was creating a design a few months back  The solution I found was to use  live  change   function    in combination with  blur   on the element you are using    If you wish to have it do something when the user simply clicks  instead of changing  just replace change with click   I assigned my dropdown an ID  selected  and used the following     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                  I saw this one didn t have a selected answer  so I figured I d give my input  This worked excellently for me  so hopefully someone else can use this code when they get stuck   http   api jquery com live   Edit  Use the on selector as opposed to  live  See jQuery  on

User · Answer

To properly fire an event every time the user selects something even the same option   you just need to trick the select box   Like others have said  specify a negative selectedIndex on focus to force the change event  While this does allow you to trick the select box  it won t work after that as long as it still has focus  The simple fix is to force the select box to blur  shown below   Standard JS HTML    lt select onchange  myCallback     onfocus  this selectedIndex -1 this blur     gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    jQuery Plugin    lt select gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    lt script type  text javascript  gt        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                lt  script gt    You can see a working demo here

User · Answer

You can use onChange  http   www w3schools com TAGS tag Select asp  Copied from http   www faqs org docs htmltut forms  SELECT onChange html onChange designates a JavaScript to run when the user chooses one of the options  This means that an action is initiated immediately when the user chooses an item  not when a  submit  button is pressed

User · Answer

Try this    lt select id  nameSelect  onfocus  javascript document getElementById  nameSelect   selectedIndex -1   onchange  doSomething this    gt       lt option value  A  gt A lt  option gt       lt option value  B  gt B lt  option gt       lt option value  C  gt C lt  option gt   lt  select gt

User · Answer

Here s my solution  completely different to any else on here  It uses the mouse position to figure out if an option was clicked as oppose to clicking on the select box to open the dropdown  It makes use of the event screenY position as this is the only reliable cross browser variable  A hover event has to be attached first so it can figure out the controls position relative to the screen before the click event   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  gt  eventHorizon          alert  option clicked          Here is my jsFiddle http   jsfiddle net sU7EV 4

User · Answer

lt script gt  function abc selectedguy    alert selectedguy      lt  script gt    lt select onchange  abc this selectedIndex    gt   lt option gt option one lt  option gt   lt option gt option two lt  option gt   lt  select gt    Here you have the index returned  and in the js code you can use this return with one switch or anything you want

User · Answer

Going to expand on jitbit s answer   I found it weird when you clicked the drop down and then clicked off the drop down without selecting anything   Ended up with something along the lines of    x000D   x000D  var lastSelectedOption   null  x000D   x000D  DDChange   function Dd    x000D      Blur after change so that clicking again without  x000D      losing focus re-triggers onfocus  x000D    Dd blur    x000D   x000D      The rest is whatever you want in the change  x000D    var tcs      span on change times    x000D    tcs html  tcs html     1   x000D       span selected index   html Dd prop  selectedIndex     x000D    return false  x000D     x000D   x000D  DDFocus   function Dd    x000D    lastSelectedOption   Dd prop  selectedIndex    x000D    Dd prop  selectedIndex   -1   x000D   x000D       span selected index   html Dd prop  selectedIndex     x000D    return false  x000D     x000D   x000D    On blur  set it back to the value before they clicked  x000D    away without selecting an option  x000D     x000D    This is what is typically weird for the user since they  x000D    might click on the dropdown to look at other options  x000D    realize they didn t what to change anything  and  x000D    click off the dropdown  x000D  DDBlur   function Dd    x000D    if  Dd prop  selectedIndex       -1  x000D      Dd prop  selectedIndex   lastSelectedOption   x000D   x000D       span selected index   html Dd prop  selectedIndex     x000D    return false  x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  Dd  onchange  DDChange   this     onfocus  DDFocus   this     onblur  DDBlur   this     gt  x000D     lt option gt 1 lt  option gt  x000D     lt option gt 2 lt  option gt  x000D   lt  select gt  x000D   lt br  gt  x000D   lt br  gt Selected index   lt span class  selected index  gt  lt  span gt  x000D   lt br  gt Times onchange triggered   lt span class  on change times  gt 0 lt  span gt  x000D   x000D   x000D    This makes a little more sense for the user and allows JavaScript to run every time they select any option including an earlier option   The downside to this approach is that it breaks the ability to tab onto a drop down and use the arrow keys to select the value   This was acceptable for me since all the users click everything all the time until the end of eternity

User · Answer

Add an extra option as the first  like the header of a column  which will be the default value of the dropdown button before click it and reset at the end of doSomething    so when choose A B C  the onchange event always trigs  when the selection is State  do nothing and return  onclick is very unstable as many people mentioned before  So all we need to do is to make an initial button label which is different as your true options so the onchange will work on any option    lt select id  btnState  onchange  doSomething this   gt     lt option value  State  selected  selected  gt State lt  option gt       lt option value  A  gt A lt  option gt     lt option value  B  gt B lt  option gt     lt option value  C  gt C lt  option gt   lt  select gt    function doSomething obj        var btnValue   obj options obj selectedIndex  value       if  btnValue     State                 do nothing       return                Do your thing here         reset      obj selectedIndex   0

User · Answer

Here is the simplest way    lt select name  ab  onchange  if  this selectedIndex  doSomething     gt       lt option value  -1  gt -- lt  option gt       lt option value  1  gt option 1 lt  option gt        lt option value  2  gt option 2 lt  option gt       lt option value  3  gt option 3 lt  option gt   lt  select gt    Works both with mouse selection and keyboard Up Down keys whes select is focused

User · Answer

Kindly note that Event Handlers are not supported for the OPTION tag on IE  with a quick thinking  I came up with this solution  try it and give me your feedback    lt script gt  var flag   true  function resetIndex selObj        if flag  selObj selectedIndex   -1      flag   true    function doSomething selObj        alert selObj value      flag   false     lt  script gt   lt select onchange  doSomething this   onclick  resetIndex this   gt   lt option value  A  gt A lt  option gt   lt option value  B  gt B lt  option gt   lt option value  C  gt C lt  option gt   lt  select gt    What I m doing here actually is resetting the select index so that the onchange event will be triggered always  true that you we lose the selected item when you click and it maybe annoying if your list is long  but it may help you in someway

User · Answer

A long while ago now but in reply to the original question  would this help   Just put onClick into the SELECT line  Then put what you want each OPTION to do in the OPTION lines  ie    lt SELECT name  your name  onClick gt   lt option value   Kilometres  onClick  YourFunction    gt Kilometres ------- -------  lt  SELECT gt

User · Answer

There are a few things you want to do here to make sure it remembers older values and triggers an onchange event even if the same option is selected again   The first thing you want is a regular onChange event        selectbox   on  change   function        console log   this  val         doSomething          To have the onChange event trigger even when the same option is selected again  you can unset selected option when the dropdown receives focus by setting it to an invalid value  But you also want to store the previously selected value to restore it in case the user does not select any new 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       The above code will allow you to trigger onchange even if the same value is selected  However  if the user clicks outside the select box  you want to restore the previous value  We do it on 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

User · Answer

lt select name  test     onchange  if this selectedIndex  lt  1  this options this selectedIndex  selected    1   gt   lt option gt 1 lt  option gt   lt option gt 2 lt  option gt   lt option gt 3 lt  option gt   lt  select gt

User · Answer

Another solution is using the onMouseUp event  OnMouseUp works also with the same option re-selected as well as changed option  Only disadvantage  The code is called when the dropdown box is openemd and a second time when the selection is made  Keep that in mind for AJAX requests  If this is not harming your logic you can use it as a simple inline hack   lt select id  quot bla quot  onmouseup  quot console log  document getElementById  bla   options document getElementById  bla   selectedIndex  value    quot  gt     lt option value  quot 0 quot  gt A lt  option gt     lt option value  quot 1 quot  gt B lt  option gt   lt  select gt

User · Answer

The wonderful thing about the select tag  in this scenario  is that it will grab its value from the option tags   Try    lt select onChange  javascript doSomething this value    gt   lt option value  A  gt A lt  option gt   lt option value  B  gt B lt  option gt   lt option value  Foo  gt C lt  option gt   lt  select gt    Worked decent for me

User · Answer

Just an idea  but is it possible to put an onclick on each of the  lt option gt  elements    lt select gt     lt option onclick  doSomething this    gt A lt  option gt     lt option onclick  doSomething this    gt B lt  option gt     lt option onclick  doSomething this    gt C lt  option gt   lt  select gt      Another option could be to use onblur on the select  This will fire anytime the user clicks away from the select  At this point you could determine what option was selected  To have this even trigger at the correct time  the onclick of the option s could blur the field  make something else active or just  blur   in jQuery

User · Answer

What works for me    lt select id  myID  onchange  doSomething     gt       lt option value  0  selected gt  Select Option  lt  option gt       lt option value  1  onclick  if   document getElementById  myID   onchange    doSomething      gt  A  lt  option gt       lt option value  2  onclick  if   document getElementById  myID   onchange    doSomething      gt  B  lt  option gt   lt  select gt    In that way  onchange calls  doSomething    when the option changes  and  onclick calls  doSomething    when onchange event is false  in other words  when you select the same option

User · Answer

If you really need this to work like this  I would do this  to ensure it works by keyboard and mouse    Add an onfocus event handler to the select to set the  current  value Add an onclick event handler to the select to handle mouse changes Add an onkeypress event handler to the select to handle keyboard changes   Unfortunately the onclick will run multiple times  e g  on onpening the select    and on selection close  and the onkeypress may fire when nothing changes      lt script gt    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              lt  script gt     lt select onfocus  setInitial this    onclick  doSomething     onkeypress  doSomething     gt         lt  select gt

User · Answer

Try this  event triggered exactly when you select option  without option changing       select   mouseup function         var open     this  data  isopen        if open            alert  selected                this  data  isopen    open         http   jsbin com dowoloka 4

User · Answer

use jquery    lt select class  target  gt     lt option gt A lt  option gt     lt option gt B lt  option gt     lt option gt C lt  option gt   lt  select gt    lt script gt          target   change function     doSomething         lt  script gt

User · Answer

So my goal was to be able to select the same value multiple times which essentially overwrites the the onchange   function and turn it into a useful onclick   method    Based on the suggestions above I came up with this which works for me    lt select name  ab  id  hi  onchange  if  typeof this selectedIndex     undefined   alert     hi   val     this blur      onfocus  this selectedIndex   -1   gt       lt option value  -1  gt -- lt  option gt       lt option value  1  gt option 1 lt  option gt       lt option value  2  gt option 2 lt  option gt       lt option value  3  gt option 3 lt  option gt   lt  select gt    http   jsfiddle net dR9tH 19

User · Answer

I found out this solution    set the selectedIndex of select element to 0 initially    set selected Index to 0  doSomethingOnChange          blah   blah          set selected Index to 0      call this method onChange event

User · Answer

The onclick approach is not entirely bad but as said  it will not be triggered when the value isn t changed by a mouse-click  It is however possible to trigger the onclick event in the onchange event    lt select onchange   doSomething      if this options this selectedIndex  onclick    null  this options this selectedIndex  onclick this      gt       lt option onclick  doSomethingElse        value  A  gt A lt  option gt       lt option onclick  doSomethingElse       value  B  gt B lt  option gt       lt option onclick  doSomethingElse       value  Foo  gt C lt  option gt   lt  select gt

User · Answer

I had faced a similar need and ended up writing a angularjs directive for the same -  guthub link - angular select  Used element 0  blur    to remove the focus off the select tag  Logic is to trigger this blur on second click of the dropdown   as-select gets triggered even when user selects the same value in the dropdown   DEMO - link

User · Answer

I know this question is very old now  but for anyone still running into this problem  I have achieved this with my own website by adding an onInput event to my option tag  then in that called function  retrieving the value of that option input   x000D   x000D   lt select id  dropdown  onInput  myFunction    gt     lt option value  1  gt 1 lt  option gt     lt option value  2  gt 2 lt  option gt   lt  select gt    lt p gt Output   lt  p gt    lt span id  output  gt  lt  span gt    lt script type  text javascript  gt  function myFunction      var optionValue   document getElementById  dropdown   value   document getElementById  output   innerHTML   optionValue     lt  script gt  x000D   x000D   x000D

User · Answer

first of all u use onChange as an event handler and then use flag variable to make it do the function u want every time u make a change    lt select    x000D   x000D  var list   document getElementById  list    x000D  var flag   true    x000D  list onchange   function      x000D  if flag   x000D  document bgColor   red   x000D  flag   false  x000D   x000D   else  x000D  document bgColor   green   x000D  flag   true  x000D    x000D    x000D   lt select id  list  gt   x000D   lt option gt op1 lt  option gt  x000D   lt option gt op2 lt  option gt  x000D   lt option gt op3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The one True answer is to not use the select field  if you need to do something when you re-select same answer    Create a dropdown menu with conventional div  button  show hide menu  Link  https   www w3schools com howto howto js dropdown asp  Could have been avoided had one been able to add event listeners to options  If there had been an onSelect listener for select element  And if clicking on the select field didn t aggravatingly fire off mousedown  mouseup  and click all at the same time on mousedown

User · Answer

what about changing the value of the select when the element gains focus  e g  with 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

User · Answer

you should try using option selected     select option selected   click doSomething

User · Answer

Actually  the onclick events will NOT fire when the user uses the keyboard to change the selection in the select control  You might have to use a combination of onChange and onClick to get the behavior you re looking for

[javascript] Is there an onSelect event or equivalent for HTML <select>?

Examples related to javascript

Examples related to html

Examples related to html-select

Examples related to dom-events