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/