“改變”事件中的奇怪行為

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

請檢查小提琴