选择选项显示问题

Posted 2021-05-05

我的页面上有两个选项，它们填充在服务器上。这里的顶部选择是“主”选择，它通过将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);
}

我的问题是，是否有办法阻止从崩溃到这个单行框中可见的选项，如果是这样，我将如何这样做？

附加信息：

没有其他任何改变选择，没有其他选择似乎有这个问题。

我们定位谷歌Chrome，版本63.0.3239.84（官方版本）（64位）。我们使用jQuery 2.1.4和Bootstrap 3.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>

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