Question

我有一个下拉菜单，我希望将JQuery事件连接到该触发器，如果有人点击它然后选择已经选择的相同选项。

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

我该怎么做？

Answer 1

尝试以下内容，

使用.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/

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

DEMO： http://jsfiddle.net/skram/NAHXP/

Answer 2

使用焦点和模糊事件......

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

Answer 3

这是点击解决方案

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 4

其他答案似乎都无法提供一种解决方案，既可以处理所有边缘情况（例如，在下拉列表之外单击，然后再次单击它）和/或避免双重事件触发。

第一个技巧是从下拉列表集中起就存储值。通常，当下拉值更改后，默认的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());
  });
});

小提琴还有更多调试输出：https://jsfiddle.net/dsschneidermann/tb5csdhp/15/

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/

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

5 个答案: