Weird behavior in "change" event

Question

I have 2 select tags, where based on the value selected in first select I'm show/hide the option in 2nd select tag which is working perfectly. However today I noticed a weird behavior.

When I tried to change the option in 2nd select using keyboard down arrow, it is still showing the hidden option. Really confused. Please share your thoughts.

Here is the fiddle, where you can reproduce the above bug as I mentioned in the picture.

JS:

$('#AboveOrBelow').on('change', function(){
    if($(this).val() === '1') {
        $('#InitialLeakSource option[data-aob=Above]').show();
        $('#InitialLeakSource option[data-aob=Below]').hide();
    }
    else if($(this).val() === "2"){
        $('#InitialLeakSource option[data-aob=Above]').hide();
        $('#InitialLeakSource option[data-aob=Below]').show();
    }
    else {
     $('#InitialLeakSource option').show();
    }
});

PS: The above picture is not clear in 100%, please zoom for a clear vision.

Answer 1

just add the below line at the end of you function

$('#InitialLeakSource').val('');

please check fiddle