Javascript 选择下拉列表时触发 JQuery 事件——但值未更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11002421/
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 event to fire when a drop down is selected -- but the value is not changed
提问by Kevin Bedell
I have a dropdown menu that I want to connect a JQuery event to that fires if someone clicks on it but then selects the same option that is already selected.
我有一个下拉菜单，我想将一个 JQuery 事件连接到该事件，如果有人点击它，然后选择已选择的相同选项，则会触发该事件。
I've got everything running using the 'change' event but there are cases where it's valid for the user to click the dropdown and reselect the same option. If that occurs I need my event handler to fire.
我已经使用 'change' 事件运行了所有内容，但在某些情况下，用户单击下拉列表并重新选择相同的选项是有效的。如果发生这种情况，我需要触发事件处理程序。
How can I do this?
我怎样才能做到这一点？
采纳答案by dsschneidermann
Other answers do not seem to provide a solution that both handles all edge-cases (such as clicking outside of the dropdown and then clicking on it again) and/or avoids double events triggering.
其他答案似乎没有提供一种解决方案，既可以处理所有边缘情况（例如单击下拉列表之外，然后再次单击它）和/或避免触发双重事件。
The first trick is to store the value from the moment the dropdown is focused. The default change() event is used to trigger the method changewithRepeatswhen the dropdown value has changed, as normal.
第一个技巧是从下拉列表聚焦的那一刻起存储值。默认的 change() 事件用于changewithRepeats在下拉值更改时触发该方法，正常情况下。
Otherwise, a second click on the focused element will call blur(), forcing a defocus and triggering changewithRepeatsif and only if the dropdown value remains the same as initially.
否则，第二次单击焦点元素将调用 blur()，changewithRepeats当且仅当下拉值与初始值保持相同时，强制散焦并触发。
Opening the dropdown and cancelling out of it is not possible, this is intentional. Any defocus will call the method. All keyboard interactions also work (but the call to blur() when selecting the same value will be slightly annoying for users with screenreaders).
打开下拉菜单并取消它是不可能的，这是故意的。任何散焦都会调用该方法。所有键盘交互也有效（但在选择相同值时调用 blur() 对有屏幕阅读器的用户来说会有点烦人）。
Focus state in the below is 0 = unfocused, 1 = when getting focus, 2 = has focus.
下面的焦点状态是 0 = 未聚焦，1 = 获得焦点时，2 = 有焦点。
$(function () {
var lastFocusValue = '';
var focusState = 0;
var changeWithRepeats = function (newestValue) {
// Your change action here
};
$('select').click (function () {
if (focusState == 1) { focusState = 2; return; }
else if (focusState == 2) $(this).blur();
}).focus(function (e) {
focusState = 1;
lastFocusValue = $(this).val();
}).blur(function () {
focusState = 0;
if ($(this).val() == lastFocusValue) {
// Same value kept in dropdown
changeWithRepeats($(this).val());
}
}).change (function () {
changeWithRepeats($(this).val());
});
});
Fiddle has some more debug outputs: https://jsfiddle.net/dsschneidermann/tb5csdhp/15/
Fiddle 有更多调试输出：https: //jsfiddle.net/dsschneidermann/tb5csdhp/15/
回答by Selvakumar Arumugam
Try something like below,
尝试像下面这样的东西，
Using .click
使用 .click
$(function () {
var cc = 0;
$('select').click(function () {
cc++;
if (cc == 2) {
$(this).change();
cc = 0;
}
}).change (function () {
$('#result').append('Changed triggered ');
cc = -1;
});
});
DEMO:http://jsfiddle.net/skram/NAHXP/2/
演示：http : //jsfiddle.net/skram/NAHXP/2/
Or using .focusand .blur
或者使用.focus和.blur
$(function () {
var ddVal = '';
$('select').focus(function () {
ddVal = $(this).val();
}).blur(function () {
if (ddVal == $(this).val()) {
$(this).change();
}
}).change (function () {
$('#result').append('Changed triggered ');
});
});
回答by Sergei Zahharenko
Use focus and blur events...
使用焦点和模糊事件...
var selectValue;
$('select').focus(function(){
selectValue = $(this).val();
}).blur(function(){
if (selectValue == $(this).val()) {
//nothing change event
}
})
回答by Sergei Zahharenko
Here is click solution
这是点击解决方案
var oldValue = null;
$('select').click(function(){
s = $(this);
val = s.val();
if (oldValue == null) {
oldValue = val;
} else {
oldValue == s.val() ? alert('nothing changed') : alert('new value');
$(document).unbind('click.valueCheck');
oldValue = null;
}
})
Here is more advanced solution with document click extended
这是更高级的解决方案，文档点击扩展
回答by MMK
use add class to solve this problem
使用添加类来解决这个问题
$("#test").change(function(event){
if($(this).find('option:selected').hasClass('actived'))
alert('already selected');//write you code here
else
$(this).find('option:selected').addClass('actived');
});
and refer this link http://jsfiddle.net/muthukumar0705/nARVu/1/
