Javascript jQuery - 取消下拉确认对话框上的更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6677744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - cancel change event on confirmation dialog for a Dropdown
提问by Vinu
I have a dropdown and I have the jQuery changefunction.
我有一个下拉菜单，我有 jQuerychange函数。
I would like to implement the change of the selected item as per the Confirmation dialog.
我想根据确认对话框实现所选项目的更改。
If confirms true i can proceed for selected change otherwise I have keep the existing item as selected and cancel the change event.
如果确认为真，我可以继续进行选定的更改，否则我将现有项目保持为选定状态并取消更改事件。
How can I implement this with jQuery?
我怎样才能用 jQuery 实现这个？
jquery Function
jQuery 函数
$(function () {
$("#dropdown").change(function () {
var success = confirm('Are you sure want to change the Dropdown ????');
if (success == true) {
alert('Changed');
// do something
}
else {
alert('Not changed');
// Cancel the change event and keep the selected element
}
});
});
One thing to remember changefunction hits only after selected item changed
So better to think to implement this on onchange- but it is not available in jquery. Is there any method to implement this?
要记住的一件事change只有在选定的项目更改后才会触发函数 所以最好考虑实现这一点onchange- 但它在 jquery 中不可用。有什么方法可以实现吗？
回答by BenM
Well, as Vinu has rightly pointed out, jQuery's changeevent is only triggered once the value of the select has actually been changed. You would be better off doing something like this:
好吧，正如 Vinu 正确指出的那样，jQuery 的change事件仅在 select 的值实际更改后才会触发。你最好做这样的事情：
var prev_val;
$('#dropdown').focus(function() {
prev_val = $(this).val();
}).change(function() {
$(this).blur() // Firefox fix as suggested by AgDude
var success = confirm('Are you sure you want to change the Dropdown?');
if(success)
{
alert('changed');
// Other changed code would be here...
}
else
{
$(this).val(prev_val);
alert('unchanged');
return false;
}
});
回答by Swader
Something like what I did here?
有点像我在这里做的？
http://jsfiddle.net/Swader/gbdMT/
http://jsfiddle.net/Swader/gbdMT/
Simply save the value as soon as a user clicks the select box, and revert back to this value if the onchange confirmation returns false.
只需在用户单击选择框后立即保存该值，如果 onchange 确认返回 false，则恢复为该值。
Here is the code from my fiddle:
这是我的小提琴中的代码：
var lastValue;
$("#changer").bind("click", function(e) {
lastValue = $(this).val();
}).bind("change", function(e) {
changeConfirmation = confirm("Really?");
if (changeConfirmation) {
// Proceed as planned
} else {
$(this).val(lastValue);
}
});
回答by Er.KT
Use following code,I have tested it and its working
使用以下代码，我已经测试过它及其工作
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;
}
});
回答by Tjcool
Below code is implemented for radio button.I think this code with minor changes can be used for drop down also.
下面的代码是为单选按钮实现的。我认为这个经过细微更改的代码也可以用于下拉菜单。
<input type="radio" class="selected" value="test1" name="test1"
checked="checked" /><label>test1</label>
<input type="radio" name="test1" value="test2" /><label>
test2</label>
<input type="radio" name="test1" value="test3" /><label>
test3</label>
</div>
$("input[name='test1']").change(function() {
var response = confirm("do you want to perform selection change");
if (response) {
var container = $(this).closest("div.selection");
//console.log(container);
//console.log("old sel =>" + $(container).find(".selected").val());
$(container).find(".selected").removeClass("selected");
$(this).addClass("selected");
//console.log($(this).val());
console.log("new sel =>" + $(container).find(".selected").val());
}
else {
var container = $(this).closest("div.selection");
$(this).prop("checked", false);
$(container).find(".selected").prop("checked", true);
}
});
回答by cREcker
As far as I know you have to handle it yourself, this might help:
据我所知，您必须自己处理，这可能会有所帮助：
<select onFocus="this.oldIndex = this.selectedIndex" onChange="if(!confirm('Are you sure?'))this.selectedIndex = this.oldIndex">
回答by Quasipickle
Blurring, focusing and storing previous values seems a bit cumbersome. I solved this problem by attaching my listener not to the select, but to the option:
模糊、聚焦和存储以前的值似乎有点麻烦。我通过将我的侦听器附加到选项而不是选择来解决这个问题：
$("#id").on('mousedown','option',confirmChange);
then,
然后，
function confirmChange(e){
var value = $(this).val(),
c = confirm('Are you sure you want to change?');
if(c)
$(this).parent().val(value);//can trigger .change() here too if necessary
else
e.preventDefault();
}
Of course optimizations can be done, but this is the general idea.
当然可以进行优化，但这是总体思路。
