Trigger change event if I click on already selected option

Question

How can I trigger change event if I click on already selected option. For example I have following options in dropdown

• Red
• Blue
• Green

and Blue option is selected. Now I want that if I click again on blue item then the change event should fire.

Answer 1

Running the change even when the user selects the selected option is a known problem - you can read here about it.

Now, when you know how to trigger an event whenever a user selects any option, you can simply store the last used value and check if the same item is selected.

var previousValue;
$("select")
    .mouseup(function() {
        var open = $(this).data("isopen");

        if (open) {
            if (this.value === previousValue)
            {
                alert("The same select has been clicked");
            }
        }

        previousValue = this.value;
    
        $(this).data("isopen", !open);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>Red</option>
  <option selected>Green</option>
  <option>Blue</option>
</select>

Answer 2

You might be able to achieve this with the click event, not the change event.

If you select the same option, the change event doesn't fire because you selection didn't change.