jQuery get to and from value of select onChange

Question

I am using below function to get value on changed. I would also like to get the value which was set before onChange action was performed.

Is it possible to do so in below function?

function getval(sel)
{
    alert(sel.value);
}
<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Answer 1

The focus event has to fire before the change event, so you can do this:

JS

var oldValue;
function getValOnFocus(sel)
{
    oldValue = sel.value;
}
function getval(sel)
{
    // can access previously set value here
    alert(`Old Value: ${oldValue}; new value: ${sel.value}`);
}

HTML

<select onchange="getval(this);" onfocus="getValOnFocus(this);">

Demo:

var oldValue;
function getValOnFocus(sel)
{
    oldValue = sel.value;
}
function getval(sel)
{
    // can access previously set value here
    alert(`Old Value: ${oldValue}; new value: ${sel.value}`);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="getval(this);" onfocus="getValOnFocus(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Answer 2

Another alternative would be to use data attributes such as:

function getval(sel) {
  console.log('original value', sel.dataset.originalValue);
  sel.dataset.originalValue = sel.value;
  console.log('new value',sel.value);
}

   <select onchange="getval(this);" data-original-value="1">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>