Jquery 选择“显示问题”选项

我的页面上有两个选择，它们在服务器上填充。 这里的顶部选择是“主”选择，它通过对无效选项应用

hidden

属性，过滤您可以在底部选择中选择的选项

例如，这个底部选择有50个选项，但只有3个适用于“泰勒保险”（见下图）。因此，无效选项被隐藏。 但是，有时，当将多个标记为隐藏时，“选择”选项会像这样折叠，只显示一个选项，右侧有一个小滚动条。单击箭头会按预期向上和向下滚动选项列表，所有其他选项都在那里。这只是偶尔发生的

这是执行此逻辑的更改函数

$(top).change(function () {
//First, we make all options invisible.
    $(bottom).find('option').prop("hidden", true);
//Then, if the selected option in the top select's ID is the same as the
//stored one on the bottom option, we unhide the option. 
    $(bottom).find('option[data-id="' + this.selectedOptions[0].dataset.id + '"]').prop("hidden", false);
}

我的问题是，是否有办法防止可见的选项塌陷到这个单行框中，如果有，我将如何进行

其他信息：

没有其他更改，也没有其他选择出现此问题

我们的目标是Google Chrome，版本63.0.3239.84（官方版本）（64位）。 我们使用jquery2.1.4和bootstrap3.3.0

---

在最新的Firefox 57.0.2（64位）上试用似乎没有这个错误，所以我认为这是Chrome显示器如何选择我提出的解决方案的问题

$(top).change(function () {
//First, we remove all options.
$(bottom).empty()
//Declaring variables here, for clarity; I'd inline them normally.
//The selected option:
var selectedID = this.selectedOptions[0].dataset.id;
//filtered options
var options = $($("#OptionListTemplate").html())
               .filter(function (obj) { return $(this).data("top-id") == selectedID });
//simply append the filtered options to the select.
$(bottom).append(options);
}

以及所需的标记

    <template id="OptionListTemplate">
      <option data-top-id="0">Select an option</option>
      <!--- Populated by controller, more options would go here.-->
    </template>

选择一个选项

---

我没有使用隐藏的属性或样式，而是使用一个模板在页面中存储所有可能的值，并筛选出我不需要的值。这可以正确地解决显示问题

似乎是Chrome中的一个bug。在中，只有选项2和选项4可见。但是，默认情况下会出现一个，即使它具有

hidden

属性，并且设置为

display:none

和

visibility:hidden

。您可能需要删除/恢复

选项

元素，而不是隐藏它们。这似乎是一个有效的解决方案。如果你想将其作为答案发布，我会接受，或者我可以发布我提出的解决方案。你可以发布自己的解决方案并接受它。我很想看看。