Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

Why not work with onchange event?

$("#sel").change(function(){
    $('body').append("<br/> Option changed");
});

Here is the fiddle

But it won't fire an even when selection is the same. Work around is to use a plugin like Chosen as suggested in another answer.

EDIT: Philosophically speaking select element is not meant for such functionality. change event suffices for most use cases related to select tags. The functionality that you desire, that is to know if a user has made a selection over the element (even if it hasn't change), doesn't fit the functional model of the select tag. Logically nobody would want to click on a select element if he/she doesn't want to change the selection.

To fit your requirement, you can give a Go button besides your select tag and call the same function onclick that you would normally do with the onchange event of select element. Otherwise give a hovercard/hover-menu instead of select.

After many experiments and searching, I am starting to get convinced that this particular different behaviour in different browsers is hard to resolve, if possible at all.

I realized, however, I could solve the problem from the other side, by using jQuery UI select menu or Chosen to create a select menu instead of using <select> tag. This way click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.

Essentially, the problem is to create a select menu that will trigger an event whenever a selection is made, even when it is the same.

This technically does (sorta) that, but in FF it triggers when you click to open and when you click to close (which you can actually do in one click, which produces the exact same thing in Safari AND Firefox). But it is the same event. (A click trigger fire on $('#sel'));

$("#sel").click(function(event) {
    if($(event.target).is('option')) {
        $(this).closest('select').click();
        return true;
    }
    console.log(event.target);
});

The reason I say that it "sorta" does that, is it doesn't handle if you select the dropdown from tabbing over and using the arrow keys. I think that if you are needing the event to be triggered even if the event same item is selected, you need to go about this differently. For me as a developer, if this was my project, it'd be unacceptable that if I tab to a select box and choose an item without touching the mouse, it won't work (meaning if a user comes to my site and interacts with a select box without a mouse and it doesn't do something he doesn't even know it's supposed to do, possibly making the whole thing not work, etc).

We can play around all day with getting .click() to work, but it's not really the solution, even if we achieved the original goal. (Oh, and I could never get anything to fire in Chrome).

Like I said in my comment, I think it has to do with how they handle interactions with the select. It almost feels as though Safari's select isn't actually on the page... that it sort creates this pretty element that acts and looks like a list of <option> elements when you click on it, but it isn't. Probably why it doesn't fire when you first click it either. Webkit doesn't treat it as a "real" element when you click on it, and just fires click on the select when you close it, never having interacted with the "real" options.

Changing the HTML may be the only way to go (like Chosen does). Ironically, some of the Chosen elements (the ones that look like dropdowns) can't be selected by tabbing over... at least not on their demo page (see the "Standard Select"). But that at least forces me to click on it, so it triggers mouse-related events.

Anyway, I hate unsolved problems, but it looks like there's no real solution for getting .click() to work on a <select> in all browsers and we should start focusing on alternative solutions. Sorry :-(