我想要实现的事情是，每当<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。
当前回答
$("#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());
});
其他回答
有几种方法可以达到你想要的结果，以下是我的拙见:
让元素保持之前的值，因此添加属性'previousValue'。
<select id="mySelect" previousValue=""></select>
初始化后，'previousValue'现在可以用作属性。在JS中，要访问这个select的previousValue:
$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}
使用'previousValue'后，将属性更新为当前值。
最好的解决办法:
$('select').on('selectric-before-change', function (event, element, selectric) {
var current = element.state.currValue; // index of current value before select a new one
var selected = element.state.selectedIdx; // index of value that will be selected
// choose what you need
console.log(element.items[current].value);
console.log(element.items[current].text);
console.log(element.items[current].slug);
});
我知道这是一个旧的线程，但我想我可以添加一点额外的。在我的情况下，我想传递文本，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的副本，而不是它的实例。
我选择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
})
使用以下代码，我已经测试了它和它的工作
var prev_val;
$('.dropdown').focus(function() {
prev_val = $(this).val();
}).change(function(){
$(this).unbind('focus');
var conf = confirm('Are you sure want to change status ?');
if(conf == true){
//your code
}
else{
$(this).val(prev_val);
$(this).bind('focus');
return false;
}
});
