Getting value of select dropdown before change

Question

The thing I want to achieve is whenever the  lt select gt  dropdown is changed I want the value of the dropdown before change  I am using 1 3 2 version of jQuery and using on change event but the value I am getting over there is after change    lt select name  test  gt   lt option value  stack  gt Stack lt  option gt   lt option value  overflow  gt Overflow lt  option gt   lt option value  my  gt My lt  option gt   lt option value  question  gt Question lt  option gt   lt  select gt    Lets say currently option My is selected now when I change it to stack in the onchange event  i e  when I changed it to stack  I want it s previous value i e  my expected in this case   How can this be achieved   Edit  In my case I am having multiple select boxes in the same page and want same thing to be applied to all of them  Also all of my select are inserted after page load through ajax

User · Answer

There are several ways to achieve your desired result, this my humble way of doing it:

Let the element hold its previous value, so add an attribute 'previousValue'.

<select id="mySelect" previousValue=""></select>

Once initialized, 'previousValue' could now be used as an attribute. In JS, to access the previousValue of this select:

$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

After you are done using 'previousValue', update the attribute to current value.

User · Answer

dropdownId   on  focus   function          var ddl     this       ddl data  previous   ddl val        on  change   function          var ddl     this       var previous   ddl data  previous        ddl data  previous   ddl val

User · Answer

x000D   x000D  var last value  var current value    document  on  click   select  function        last value     this  val       on  change   select  function        current value     this  val         console log  last value -   last value       console log  current value -   current value       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt select name  test  gt   lt option value  stack  gt Stack lt  option gt   lt option value  overflow  gt Overflow lt  option gt   lt option value  my  gt My lt  option gt   lt option value  question  gt Question lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

Use following code I have tested it and its working  var prev val      dropdown   focus function         prev val     this  val       change function                  this  unbind  focus                var conf   confirm  Are you sure want to change status                   if conf    true                     your code                           else                    this  val prev val                     this  bind  focus                    return false

User · Answer

please don t use a global var for this - store the prev value at the data here is an example  http   jsbin com uqupu3 2 edit  the code for ref     document  ready function      var sel       sel      sel data  prev  sel val        sel change function data        var jqThis     this        alert jqThis data  prev          jqThis data  prev  jqThis val                 just saw that you have many selects on page - this approach will also work for you since for each select you will store the prev value on the data of the select

User · Answer

keep the currently selected drop down value with chosen jquery in a global variable before writing the drop down  on change  action function  If you want to set previous value in the function you can use the global variable     global variable var previousValue     dropDownList   val        dropDownList   change function      BootstrapDialog confirm   Are you sure you want to continue      function  result      if  result         return true      else             dropDownList   val previousValue  trigger  chosen updated           return false

User · Answer

I am using event  live   my solution is basically similiar with Dimitiar  but instead of using  focus   my previous value is stored when  click  is triggered    var previous    initial prev value      select   live  click   function                update previous value         previous     this  val           change function             alert previous     I have previous value

User · Answer

I go for Avi Pinto s solution which uses jquery data    Using focus isn t a valid solution  It works at first time you change the options  but if you stay on that select element  and press key  up  or  down   It won t go through the focus event again   So the solution should be more looks like the following      set the pre data  usually needed after you initialize the select element    mySelect   data  pre     this  val         mySelect   change function e       var before change     this  data  pre     get the pre data       Do your work here       this  data  pre     this  val      update the pre data

User · Answer

function          var value       name request status    change function             if  confirm  You are about to update the status of this request  please confirm                    this  closest  form   submit       submit the form          else                 this  val value      set the value back                  val

User · Answer

This is an improvement on  thisisboris answer   It adds a current value to data  so the code can control when a variable set to the current value is changed     function            Initialize the previous-attribute     var selects       select           each  selects  function  index  myValue                myValue   data   mgc-previous   myValue value               myValue   data   mgc-current   myValue value                      Listen on the body for changes to selects        body   on  change    select           function                         alert  I am a body alert                  this  data  mgc-previous     this  data   mgc-current                     this  data  mgc-current     this  val

User · Answer

I needed to reveal a different div based on the selection  This is how you can do it with jquery and es6 syntax  HTML   lt select class  reveal  gt       lt option disabled selected value gt Select option lt  option gt       lt option value  value1  data-target   target-1   gt Option 1 lt  option gt       lt option value  value2  data-target   target-2   gt Option 2 lt  option gt   lt  select gt   lt div id  target-1  style  display  none  gt      option 1  lt  div gt   lt div id  target-2  style  display  none  gt      option 2  lt  div gt    JS     select reveal   each  i  element   gt         create reference variable      let  option      option selected   element        element  on  change   event   gt              get the current select element         let selector   event currentTarget           hide previously selected target         if typeof  option data  target        undefined                   option data  target    hide                       set new target id          option      option selected   selector            show new target         if typeof  option data  target        undefined                   option data  target    show

User · Answer

Well  why don t you store the current selected value  and when the selected item is changed you will have the old value stored   and you can update it again as you wish

User · Answer

I d like to contribute another option to solve this issue  since the solutions proposed above did not solve my scenario    function                  Initialize the previous-attribute       var selects      select          selects data  previous   selects val               Listen on the body for changes to selects          body   on  change    select           function                         this  data  previous     this  val                                     This does use jQuery so that def  is a dependency here  but this can be adapted to work in pure javascript   Add a listener to the body  check if the original target was a select  execute function         By attaching the change listener to the body  you can pretty much be sure this will fire after specific listeners for the selects  otherwise the value of  data-previous  will be overwritten before you can even read it   This is of course assuming that you prefer to use separate listeners for your set-previous and check-value  It fits right in with the single-responsibility pattern   Note  This adds this  previous  functionality to all selects  so be sure to fine-tune the selectors if needed

User · Answer

Combine the focus event with the change event to achieve what you want    function          var previous          select   on  focus   function                 Store the current value on focus and on change         previous   this value         change function                Do something with the previous value after the change         alert previous               Make sure the previous value is updated         previous   this value                  Working example  http   jsfiddle net x5PKf 766

User · Answer

Track the value by hand   var selects   jQuery  select track me     selects each function  i  element      var select   jQuery element     var previousValue   select val      select bind  change   function          var currentValue   select val            Use currentValue and previousValue                 previousValue   currentValue

User · Answer

How about using a custom jQuery event with an angular watch type interface      adds a custom jQuery event which gives the previous and current values of an input on change  function              new event type tl change     jQuery event special tl change             add  function  handleObj                   use mousedown and touchstart so that if you stay focused on the                element and keep changing it  it continues to update the prev val               this                   on  mousedown tl change touchstart tl change   handleObj selector  focusHandler                   on  change tl change   handleObj selector  function  e                       use an anonymous funciton here so we have access to the                    original handle object to call the handler with our args                 var  el     this                      call our handle function  passing in the event  the previous and current vals                    override the change event name to our name                 e type    tl change                   handleObj handler apply  el   e   el data  tl-previous-val     el val                                         remove  function  handleObj                  this                   off  mousedown tl change touchstart tl change   handleObj selector  focusHandler                   off  change tl change   handleObj selector                   removeData  tl-previous-val                             on focus lets set the previous value of the element to a data attr     function focusHandler e            var  el     this            el data  tl-previous-val    el val              jQuery       usage     some-element   on  tl change     delegate-maybe   function  e  prev  current        console log e              regular event object     console log prev           previous value of input  before change      console log current        current value of input  after change      console log this           element

User · Answer

I know this is an old thread  but thought I may add on a little extra  In my case I was wanting to pass on the text  val and some other data attr  In this case its better to store the whole option as a prev value rather than just the val   Example code below   var  sel      your select     sel data  prevSel    sel clone      sel on  change   function            grab previous select     var prevSel     this  data  prevSel           do what you want with the previous select     var prevVal   prevSel val        var prevText   prevSel text        alert  option value -     prevVal     option text -     prevText         reset prev val               this  data  prevSel     this  clone           EDIT   I forgot to add  clone   onto the element  in not doing so when you try to pull back the values you end up pulling in the new copy of the select rather than the previous  Using the clone   method stores a copy of the select instead of an instance of it

User · Answer

Best solution      select   on  selectric-before-change   function  event  element  selectric        var current   element state currValue     index of current value before select a new one     var selected   element state selectedIdx     index of value that will be selected         choose what you need     console log element items current  value       console log element items current  text       console log element items current  slug

[javascript] Getting value of select (dropdown) before change

Examples related to javascript

Examples related to jquery

Examples related to jquery-events