我想要实现的事情是,每当<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。


当前回答

手动跟踪值。

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

其他回答

那么,为什么不存储当前选定的值,而当选定的项被更改时,您将存储旧的值呢?(你可以根据自己的意愿再次更新)

手动跟踪值。

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

我选择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
})

我知道这是一个旧的线程,但我想我可以添加一点额外的。在我的情况下,我想传递文本,val和其他一些数据attr。在这种情况下,最好将整个选项存储为prev值,而不仅仅是val值。

示例代码如下:

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

编辑:

我忘记在元素上添加.clone()。如果不这样做,当你试图回拉值时,你最终会拉入选择的新副本,而不是以前的副本。使用clone()方法存储select的副本,而不是它的实例。

请不要为此使用全局变量—将prev值存储在数据中 这里有一个例子:http://jsbin.com/uqupu3/2/edit

参考代码:

$(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值在选择的数据