“改变”事件中的奇怪行为

Question

我有2个select标签，根据第一个选择中选择的值，我显示/隐藏第二个select标签中的选项，该选项工作正常。 然而今天我发现了一种奇怪的行为。

当我尝试使用键盘向下箭头更改第二个选项中的选项时，它仍然显示隐藏选项。 真的很困惑。 请分享你的想法。

这是小提琴 ，你可以重现上面的错误，就像我在图片中提到的那样。

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：以上图片不清晰100％，请放大以获得清晰的视野。

Answer 1

只需在函数末尾添加以下行

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

请检查小提琴