在更改之前获取select（下拉列表）的值
我想实现的事情是每当<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>
让我们说当前选项我现在被选中，当我改变它在堆栈中的onchange事件（即当我改变它堆栈）我想它是以前的值，即我的预期在这种情况下。
这怎么能实现？
编辑：在我的情况下，我在同一页面有多个选择框，并希望同样的事情被应用到所有的人。 我所有的选择都通过ajax页面加载后插入。
将焦点事件与更改事件组合起来以实现您想要的功能：
(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
请不要为此使用全局变量 – 在数据中存储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值的数据选择
我去找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 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; }); });
$("#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()); });
我使用事件“生活”，我的解决方案基本上类似于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 });
在写入“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; } }); });
我知道这是一个古老的线程，但我想我可以加一点额外的东西。 在我的情况下，我想传递的文本，val和一些其他数据属性。 在这种情况下，最好将整个选项存储为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的副本，而不是它的一个实例。
那么，为什么你不存储当前选定的值，当选择的项目被改变，你将存储旧的值？ （并且可以根据需要再次更新）
使用下面的代码，我已经测试了它和它的工作
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; } });
(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(); })();
我想提供另外一个选择来解决这个问题。 因为上面提出的解决方案并没有解决我的情况。
(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工作。 （将侦听器添加到主体，检查原始目标是否是选择，执行函数，…）。
通过将更改监听器附加到主体，几乎可以肯定，在选择了特定的监听器之后，这将会触发，否则在读取之前，“data-previous”的值将被覆盖。
这当然假设你更喜欢为你的set-previous和check-value使用不同的监听器。 它适合于单一责任模式。
注意：这增加了这个“以前的”功能到所有选择，所以一定要微调选择器，如果需要的话。
这是对@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() ); } ); })();
最佳解决方案
$('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); });
