10

JQueryイベントを接続したいドロップダウンメニューがあり、誰かがそれをクリックしたが、すでに選択されているのと同じオプションを選択した場合に発生します。

'change'イベントを使用してすべてを実行していますが、ユーザーがドロップダウンをクリックして同じオプションを再選択することが有効な場合があります。その場合は、イベントハンドラーを起動する必要があります。

これどうやってするの？

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、ドロップダウン値が変更されたときにメソッドをトリガーします。

それ以外の場合、フォーカスされた要素を2回クリックすると、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/

于 2018-09-07T13:48:24.837 に答える
2

この問題を解決するには、addクラスを使用します

 $("#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 に答える