选择选项显示问题

问题描述 投票:1回答:1

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

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

enter image description here

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

$(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显示选择的问题...

jquery html twitter-bootstrap google-chrome drop-down-menu
1个回答
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>

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

© www.soinside.com 2019 - 2024. All rights reserved.