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

手动跟踪值。

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

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

请不要为此使用全局变量-将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值在选择的数据

将焦点事件与改变事件结合起来可以达到你想要的效果:

(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

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

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

(function() {


var value = $('[name=request_status]').change(function() {
if (confirm('You are about to update the status of this request, please confirm')) {
$(this).closest('form').submit(); // submit the form
}else {
$(this).val(value); // set the value back
}
}).val();
})();

我使用事件“live”，我的解决方案基本上类似于Dimitiar，但不是使用“焦点”，我以前的值被存储时，“点击”被触发。

var previous = "initial prev value";
$("select").live('click', function () {
//update previous value
previous = $(this).val();
}).change(function() {
alert(previous); //I have previous value
});

如何使用一个自定义的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
});

我想为解决这个问题贡献另一种选择;因为上面提出的解决方案并没有解决我的情况。

(function()
{
// Initialize the previous-attribute
var selects = $('select');
selects.data('previous', selects.val());


// Listen on the body for changes to selects
$('body').on('change', 'select',
function()
{
$(this).data('previous', $(this).val());
}
);
}
)();

这确实使用了jQuery，所以def.在这里是一个依赖项，但这可以在纯javascript中进行调整。(在body中添加监听器，检查原始目标是否为select, execute函数，…)

通过将更改侦听器附加到对象体，你几乎可以确定这将为选择对象触发后特定的侦听器，否则'data-previous'的值将在你读取它之前被覆盖。

当然，这是假设您更喜欢为set-previous和check-value使用单独的侦听器。它正好符合单一责任模式。

注意:将此“先前”功能添加到所有选择中，因此如果需要，请确保对选择器进行微调。

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

这是对@thisisboris的回答的改进。它将当前值添加到数据中，因此代码可以控制设置为当前值的变量何时被更改。

(function()
{
// Initialize the previous-attribute
var selects = $( 'select' );
$.each( selects, function( index, myValue ) {
$( myValue ).data( 'mgc-previous', myValue.value );
$( myValue ).data( 'mgc-current', myValue.value );
});


// Listen on the body for changes to selects
$('body').on('change', 'select',
function()
{
alert('I am a body alert');
$(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
$(this).data('mgc-current', $(this).val() );
}
);
})();

我知道这是一个旧的线程，但我想我可以添加一点额外的。在我的情况下，我想传递文本，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的副本，而不是它的实例。

最好的解决办法:

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

有几种方法可以达到你想要的结果，以下是我的拙见:

让元素保持之前的值，因此添加属性'previousValue'。

<select id="mySelect" previousValue=""></select>

初始化后，'previousValue'现在可以用作属性。在JS中，要访问这个select的previousValue:

$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

使用'previousValue'后，将属性更新为当前值。

我需要根据选择显示一个不同的div

这就是如何使用jquery和es6语法来做到这一点

超文本标记语言

<select class="reveal">
<option disabled selected value>Select option</option>
<option value="value1" data-target="#target-1" >Option 1</option>
<option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
option 1
</div>
<div id="target-2" style="display: none">
option 2
</div>

JS

$('select.reveal').each((i, element)=>{
//create reference variable
let $option = $('option:selected', element)
$(element).on('change', event => {
//get the current select element
let selector = event.currentTarget
//hide previously selected target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).hide()
}
//set new target id
$option = $('option:selected', selector)
//show new target
if(typeof $option.data('target') !== 'undefined'){
$($option.data('target')).show()
}
})
})

下面是一个简单的解决方案，没有jQuery、DOM遍历、事件绑定、全局变量等开销。它提示用户用包含“before”和“after”值的消息确认更改，并根据用户的选择取消或接受更改。

<select name="test"
onfocus="handleOnFocus(this);"
onchange="if(handleOnChange(this) == false) { return false; }"
data-original-selected-index="">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>




// Prompt user to confirm the change
function handleOnChange(selectObj) {
var confirmationMessage = 'Change ' +
selectObj.options[selectObj.dataset.originalSelectedIndex].text +
' to ' +
selectObj.options[selectObj.selectedIndex].text + '?';


if (!confirm(confirmationMessage)) {
selectObj.selectedIndex = selectObj.dataset.originalSelectedIndex;
return false;
} else {
selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
return true;
}
}


// Initialize original selected index (one-time)
function handleOnFocus(selectObj) {
if (selectObj.dataset.originalSelectedIndex == '') {
selectObj.dataset.originalSelectedIndex = selectObj.selectedIndex;
}
}

JSFiddle在这里: https://jsfiddle.net/humbads/f3a0v8ys/ < / p >

注1:onchange处理程序是这样编写的，所以这个解决方案也可以与ASP一起工作。Net下拉列表控件与AutoPostBack=True和OnSelectedIndexChanged处理程序。

注意2:选项不应该包含空值。如果存在，则更改初始值。

将它存储在一个self属性中(在文档就绪时):

$('#myselect').attr('orig',$('#myselect').val());

然后与变化后的值进行比较:

if ($('#myselect').attr('orig')!=$('#myselect').val()) ...