“change”事件中的奇怪行为

Question

我有两个 select 标签，基于第一个 select 中选择的值显示/隐藏第二个 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();
    }
});

备注: 上面的图片并非100%清晰，请放大以获得更清晰的视野。

- Praveen

---

仅仅隐藏选项并不能使它们无法选择，你需要将它们禁用。 - adeneo

很抱歉，我不能翻译链接。请提供需要翻译的具体文本内容。 - adeneo

@adeneo 但是当我通过“CLICK”事件更改值时，它不显示。我很困惑为什么只有在我通过KEY DOWN事件更改选项时才会发生这种情况。 - Praveen

当您打开选择器时，选项是隐藏的，但是当您使用键滚动选项时，选择器的值会更改，并且即使这些选项被隐藏，它们仍然可选，您必须将其禁用。 - adeneo

@user1671639 "这是IE" - 这可能会有用：https://dev59.com/l3I-5IYBdhLWcg3wED9V - Sumurai8

Answer 1

只需在您的函数末尾添加以下行即可。

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

请查看 fiddle。

- Mohammad Ismail Khan

---

我觉得你误解了我的问题。请看一下我在问题中提供的图片。 - Praveen

你的回答是，当你选择Above时，在第二个下拉菜单中会显示Above 1、Above 2。如果在第二个下拉菜单中选择Above1，然后返回到下拉菜单1并选择Below，Above1仍然存在吗？ 只需在jsfiddle中检查答案即可。 - Mohammad Ismail Khan

是的，我知道。但是，如果您通过按下键更改选项，它仍然会显示隐藏的选项。您可以在我的fiddle中轻松重现此问题。 - Praveen

请检查我的答案，我已经提供了链接，但它没有显示隐藏选项。 - Mohammad Ismail Khan

+1 同 @adeneo 的 fiddle。无论如何，谢谢。 - Praveen

我不确定你为什么说和@adeneo的fiddle一样，因为我已经对它进行了更改。http://jsfiddle.net/ueHMP/12/。现在它可以正常工作。你也可以试试看。 - Mohammad Ismail Khan