我想要实现的事情是，每当<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。
当前回答
如何使用一个自定义的jQuery事件与角手表类型的接口;
// adds a custom jQuery event which gives the previous and current values of an input on change
(function ($) {
// new event type tl_change
jQuery.event.special.tl_change = {
add: function (handleObj) {
// use mousedown and touchstart so that if you stay focused on the
// element and keep changing it, it continues to update the prev val
$(this)
.on('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
.on('change.tl_change', handleObj.selector, function (e) {
// use an anonymous funciton here so we have access to the
// original handle object to call the handler with our args
var $el = $(this);
// call our handle function, passing in the event, the previous and current vals
// override the change event name to our name
e.type = "tl_change";
handleObj.handler.apply($el, [e, $el.data('tl-previous-val'), $el.val()]);
});
},
remove: function (handleObj) {
$(this)
.off('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
.off('change.tl_change', handleObj.selector)
.removeData('tl-previous-val');
}
};
// on focus lets set the previous value of the element to a data attr
function focusHandler(e) {
var $el = $(this);
$el.data('tl-previous-val', $el.val());
}
})(jQuery);
// usage
$('.some-element').on('tl_change', '.delegate-maybe', function (e, prev, current) {
console.log(e); // regular event object
console.log(prev); // previous value of input (before change)
console.log(current); // current value of input (after change)
console.log(this); // element
});
其他回答
在编写下拉“on change”动作函数之前，将当前选中的jquery下拉值保存在全局变量中。 如果你想在函数中设置之前的值，你可以使用全局变量。
//global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
function (result) {
if (result) {
return true;
} else {
$("#dropDownList").val(previousValue).trigger('chosen:updated');
return false;
}
});
});
手动跟踪值。
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;
});
});
最好的解决办法:
$('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);
});
我选择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
})
那么，为什么不存储当前选定的值，而当选定的项被更改时，您将存储旧的值呢?(你可以根据自己的意愿再次更新)
