选择选项显示问题

时间:2017-12-21 22:36:32

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

我的页面上有两个选项,它们填充在服务器上。 这里的最佳选择是" master"通过将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显示选择的问题...

1 个答案:

答案 0 :(得分: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>

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