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

Question

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

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

以下是fiddle，您可以在其中重现上面提到的错误，如图中所示。

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('');

请检查小提琴