JQuery event to fire when a drop down is selected — but the value is not changed

Question

I have a dropdown menu that I want to connect a JQuery event to that fires if someone clicks on it but then selects the same option that is already selected.

I've got everything running using the 'change' event but there are cases where it's valid for the user to click the dropdown and reselect the same option. If that occurs I need my event handler to fire.

How can I do this?

Answer 1

Try something like below,

Using .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/

Or using .focus and .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

Use focus and blur events...

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

Answer 3

Here is click solution

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

Here is more advanced solution with document click extended

DEMO2

Answer 4

Other answers do not seem to provide a solution that both handles all edge-cases (such as clicking outside of the dropdown and then clicking on it again) and/or avoids double events triggering.

The first trick is to store the value from the moment the dropdown is focused. The default change() event is used to trigger the method changewithRepeats when the dropdown value has changed, as normal.

Otherwise, a second click on the focused element will call blur(), forcing a defocus and triggering changewithRepeats if and only if the dropdown value remains the same as initially.

Opening the dropdown and cancelling out of it is not possible, this is intentional. Any defocus will call the method. All keyboard interactions also work ( but the call to blur() when selecting the same value will be slightly annoying for users with screenreaders ).

Focus state in the below is 0 = unfocused, 1 = when getting focus, 2 = has focus.

$(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 has some more debug outputs: https://jsfiddle.net/dsschneidermann/tb5csdhp/15/

Answer 5

use add class to solve this problem

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

});

and refer this link http://jsfiddle.net/muthukumar0705/nARVu/1/