10

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

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

我怎样才能做到这一点？

4

5 回答 5

8

试试下面的东西，

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

于 2012-06-12T18:31:32.043 回答
4

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

var selectValue;
$('select').focus(function(){
   selectValue = $(this).val();
}).blur(function(){
  if (selectValue == $(this).val()) {
     //nothing change event
  }
})
于 2012-06-12T18:22:55.743 回答
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;      
  }
})

演示

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

演示2

于 2012-06-12T21:02:30.847 回答
3

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

第一个技巧是从下拉集中的那一刻起存储值。默认的 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/

于 2018-09-07T13:48:24.837 回答
2

使用添加类来解决这个问题

 $("#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/

于 2012-06-12T18:29:08.987 回答