在更改之前获取select(下拉列表)的值

Question

我想要实现的是每当<select>下拉列表被更改时我想要更改前的下拉列表的值.我正在使用1.3.2版本的jquery并在更改事件上使用但是我在那里得到的值是在更改之后.

<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>

让我们说当前选择My当我在onchange事件中将其更改为堆栈时(即当我将其更改为堆栈时),我希望它是先前的值,即我在这种情况下的预期.

怎么能实现这一目标？

编辑:在我的情况下,我在同一页面中有多个选择框,并希望同样的事情应用于所有这些.此外,我的所有选择都是在通过ajax加载页面后插入的.

Answer 1

将焦点事件与更改事件相结合,以实现您的目标:

(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;
    });
})();

工作示例:http://jsfiddle.net/x5PKf/766

Answer 2

请不要使用全局变量 - 存储此处数据的prev值是一个例子:http://jsbin.com/uqupu3/2/edit

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());
  });
});

只是看到你在页面上有很多选择 - 这种方法也适用于你,因为对于每个选择你将把prev值存储在select的数据上

Answer 3

我选择使用的Avi Pinto解决方案 jquery.data()

使用焦点不是有效的解决方案.它在您第一次更改选项时有效,但如果您保持选择元素,则按"向上"或"向下"键.它不会再次通过焦点事件.

所以解决方案应该更像以下,

//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
})

Answer 4

手动追踪价值.

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;
  });
});

Answer 5

 $("#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());
});