10

How can I retrieve the new selected value and the previous selected value with JavaScript when onChange or similar event is called?

<select size="1" id="x" onchange="doSomething()">
  <option value="47">Value 47</option>
  ...


function doSomething() {
  var oldValue = null; // how to get the old value?
  var newValue = document.getElementById('x').selected.value;
  // ...

Thank you! :)

Improve this question
0

4 Answers 4

Reset to default
9

Using straight JavaScript and DOM, something like this (live example):

var box, oldValue;

// Get a reference to the select box's DOM element.
// This can be any of several ways; below I'll look
// it up by ID.
box = document.getElementById('theSelect');
if (box.addEventListener) {
  // DOM2 standard
  box.addEventListener("change", changeHandler, false);
}
else if (box.attachEvent) {
  // IE fallback
  box.attachEvent("onchange", changeHandler);
}
else {
  // DOM0 fallback
  box.onchange = changeHandler;
}

// Our handler
function changeHandler(event) {
  var index, newValue;

  // Get the current index
  index = this.selectedIndex;
  if (index >= 0 && this.options.length > index) {
    // Get the new value
    newValue = this.options[index].value;
  }

  // **Your code here**: old value is `oldValue`, new value is `newValue`
  // Note that `newValue`` may well be undefined
  display("Old value: " + oldValue);
  display("New value: " + newValue);

  // When done processing the change, remember the old value
  oldValue = newValue;
}

(I'm assuming all of the above is inside a function, like a page load function or similar, as in the live example, so we're not creating unnecessary global symbols [box, oldValue, 'changeHandler`].)

Note that the change event is raised by different browsers at different times. Some browsers raise the event when the selection changes, others wait until focus leaves the select box.

But you might consider using a library like jQuery, Prototype, YUI, Closure, or any of several others, as they make a lot of this stuff a lot easier.

Improve this answer
1
  • I would love to use a JavaScript Framework. I'm a huge fan of Prototype! :) But we are not able introduce one of them at the moment. :( Thank you for your tip, I'll let you know if it's working.
    – Thomas
    Commented Nov 30, 2010 at 16:11
6

Look here: Getting value of select (dropdown) before change I think the better,

(function () {
    var previous;

    $("select").focus(function () {
        // Store the current value on focus, before it changes
        previous = this.value;
    }).change(function() {
        // Do something with the previous value after the change
        alert(previous);
    });
})();
Improve this answer
0
2

The following code snippet may help

<html>
    <script type="text/javascript">
        this.previousVal;
        function changeHandler(selectBox)
        {
            alert('Previous Val-->'+selectBox.options[this.previousVal].innerHTML)
            alert('New Val-->'+selectBox.options[selectBox.selectedIndex].innerHTML)
            this.previousVal=selectBox.selectedIndex;
        }
    </script>
    <body>
        <select id="selectBox" onchange="changeHandler(this)">
            <option>Sunday</option><option>Monday</option>
            <option>Tuesday</option><option>Wednesday</option>
        </select>
        <script type="text/javascript">
            var selectBox=document.getElementById("selectBox")
            this.previousVal=selectBox.selectedIndex
        </script>
    <body>
</html>
Improve this answer
1
  • How is this code better than the accepted answer? Why is it preferred to use the inline onchange event?
    – random_user_name
    Commented Oct 10, 2012 at 19:14
1

Below worked for me. Add below two events to your select HTML tag:-

onFocus='this.oldValue = this.value'; //if required in your case add this line to other events like onKeyPressDown and onClick. 
onChange = 'alert(this.oldValue); this.value=this.oldValue'
Improve this answer
1
  • 1
    Thank you for this answer. I prefer this way. Instead of using this I'm setting a property in the window. $myName.oldValue = this.value And I also assigned the oldValue to the current value in both onfocus and onchange because the answer can change without the focus firing again.
    – Alan Wells
    Commented Mar 11, 2019 at 22:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.