选择选项显示问题答案

【问题标题】：Select Option display issue选择选项显示问题
【发布时间】：2018-06-04 15:25:11
【问题描述】：

我的页面上有两个选择，它们填充在服务器上。这里的顶部选择是“主”选择，它通过将hidden 属性应用于无效选项来过滤您可以在底部选择中选择的选项。

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

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

$(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 位）。我们使用 jQuery 2.1.4 和 Bootstrap 3.3.0。

尝试最新的 Firefox 57.0.2（64 位）似乎没有这个错误，所以我认为这是 Chrome 显示选择的问题...

【问题讨论】：

似乎是 Chrome 中的一个错误。在jsfiddle.net/a2h0g8jb/1 中，只有选项 Two 和 Four 应该是可见的。但是，默认情况下会出现 One，即使它具有 hidden 属性，并且它被设置为 display: none 和 visibility: hidden。您可能需要删除/恢复 option 元素而不是隐藏它们。
看来这是一个有效的解决方案。如果您想将其发布为答案，我会接受，或者我可以发布我想出的解决方案。
您可以发布自己的解决方案并接受它。有兴趣看看。

标签： jquery html twitter-bootstrap google-chrome drop-down-menu

【解决方案1】：

我想出的解决方案；

$(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>

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

【讨论】：