jQuery - select on change event causes select-box to instantly close again in IE10 and FF

Question

i am having a very strange and annoying problem with binding jquery "on change" events to <select> - boxes in IE10 and (various) firefox-version.
this problem does not occur in Chrome or IE11.

the dropdown-menu which is opening after clicking a select-box is instantly closed again, but only if there is an "on change" event bound to it.
i am using quite a standard jquery routine here:

$(document).on("change", "#kp_gebdat_y, #kp_gebdat_m, #kp_gebdat_d", function () {

    var year = $("#kp_gebdat_y").val();
    var month = $("#kp_gebdat_m").val();
    var day = $("#kp_gebdat_d").val();

    $("#kp_gebdat").val(year + "-" + month + "-" + day);
});

I already tried to mess around with preventDefault() but that doesn't change anyhting. it seems like the first dropdown is "focused" after any of the dropboxes are clicked in IE10.

here is a JSFiddle that reproduces the problem in IE10 and FF as well: http://jsfiddle.net/northkildonan/7zyw2nff/1/

Any help would be appreciated!

Answer 1

As mentioned in the comment above, the problem is not jQuery or the JavaScript event handler, it is the markup itself. The select fields are nested inside a label tag:

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Monat</option>
        [...]   
    </select>
    <select type="text">
        <option value="0">Jahr</option>
        [...]   
    </select>   
</label>

And this is what causes the error: In case you focus the second or third select field, the event is delegated to the label, which is (in FF) bind to the first form field child - your first select field and focussing it - and that focus causes the immediate blur of second + third select field inside the same label. So you can either remove the label completely or nest each select in an own label:

<label>
    <select type="text">
        <option value="0">Tag</option>
        [...]   
    </select>
</label>
<label>
   [...]
</label>

I think at the end FF behaviour is correct, because an label should be related to one element.