選擇下拉列表時要觸發的JQuery事件 - 但值不會更改

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

演示： 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 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());
  });
});

Fiddle有更多的調試輸出： 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/