Question

我想要实现的是每当下拉列表发生变化时，我想要在更改之前输入下拉列表的值。需要比较先前值和当前值并执行一些操作。让我们说现在当我在onchange事件中将它更改为OPtion1时选择Option3（即当我更改它时）我想要它的先前值，即在这种情况下预期的option3。

如何实现这一目标？

<select name="test">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

Answer 1

在你的JS代码中使用全局变量初始化select的第一个值，或至少可以通过onchange函数访问，现在当select触发onchange函数时使用全局变量与当前选择值进行比较，比较后，将全局变量值更新为当前选择值。

尝试以下js：

<script>
var previous;
window.onload=function()
{
    previous=document.getElementById("test").value;
}
function compare(select)
{
    alert("previous:"+previous+" | current: "+select.value);
    previous=select.value;
}
</script>

小提琴：http://jsfiddle.net/2ogm86sn/

Answer 2

您需要添加2个事件侦听器，一个在焦点上，另一个在更改...

(function () {

    var select = document.getElementById("test");

    select.addEventListener('focus', function () {

        // Here is the current value
        var curVal = this.value;

        console.log('Current Value: ' + curVal);

    });

    select.addEventListener('change', function () {

        // Here is the current value
        var newVal = this.value;

        console.log('New Value: ' + newVal);

    });

})();

点击此处查看Working Demo

在更改之前获取select（下拉列表）的值：使用普通的Javascript

2 个答案: