选择下拉列表时要触发的JQuery事件 – 但值不会更改

我有一个下拉菜单，我想连接一个JQuery事件，如果有人点击它然后选择已经选择的相同选项。

我已经使用’change’事件运行了所有内容，但有些情况下，用户单击下拉列表并重新选择相同选项是有效的。 如果发生这种情况，我需要触发事件处理程序。

我怎样才能做到这一点？

Answer 1

其他答案似乎没有提供处理所有边缘情况的解决方案（例如在下拉列表外单击然后再次单击它）和/或避免双事件触发。

第一个技巧是从下拉列表的重点开始存储值。 默认的change（）事件用于在下拉值更改时触发方法changewithRepeats ，正常情况下。

否则，第二次单击聚焦元素将调用blur（），强制散焦并触发changewithRepeats当且仅当下拉值保持与最初相同时。

打开下拉菜单并取消它是不可能的，这是故意的。 任何散焦都会调用该方法。 所有键盘交互也可以工作（ 但是选择相同值时对blur（）的调用对于具有屏幕阅读器的用户来说会有点烦人 ）。

下面的焦点状态是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有更多的调试输出： https ： //jsfiddle.net/dsschneidermann/tb5csdhp/15/

Answer 2

尝试类似下面的内容，

使用.click

 $(function () { var cc = 0; $('select').click(function () { cc++; if (cc == 2) { $(this).change(); cc = 0; } }).change (function () { $('#result').append('Changed triggered '); cc = -1; }); }); 

演示： http ： //jsfiddle.net/skram/NAHXP/2/

或者使用.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 '); }); }); 

演示： http ： //jsfiddle.net/skram/NAHXP/

Answer 3

使用焦点和模糊事件……

 var selectValue; $('select').focus(function(){ selectValue = $(this).val(); }).blur(function(){ if (selectValue == $(this).val()) { //nothing change event } }) 

Answer 4

这是点击解决方案

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

DEMO

这是更高级的解决方案，文档点击扩展

DEMO2

Answer 5

使用add class来解决这个问题

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

并参考此链接http://jsfiddle.net/muthukumar0705/nARVu/1/