jquery - 下拉列表不会显示值大于 20 的选项

Question

这非常非常奇怪，我不太确定这里发生了什么。我会尽力解释。

我有一个选择菜单，在该菜单中我缩小了结果范围，因此它只会显示该特定模块所需的内容。为此，我获取所需的值并仅显示具有这些值的选项。一切似乎都工作正常，除非我的值超过 20。

一开始我可以显示所有值，其中有 70 个，但是一旦它们被隐藏，即使手动也无法显示超过 20 的值。

在控制台中，我尝试了一些方法来尝试让它显示出来。 (我使用列表中的最后一个，因为它很容易发现)

$("select[name='Type'] option[value='70']").show().prop('disabled', false);

这会将 html 更改为

<option value="70" style="display: block;">Title Form Availability</option>

并删除了display:none;，但它仍然没有显示在我的选择菜单中。

我可以为 20 以内的任何值编写相同的代码，它将显示在屏幕上。

选项标签是否有最大值？如果这是真的，为什么我可以让它们在屏幕首次加载时全部显示？

我对为什么感到非常困惑，感谢任何帮助!

我什至有一个 jsFiddel 显示发生了什么 http://jsfiddle.net/005x7wye/

Answer 1

看来.hide()和 .show()函数在某些浏览器中对于 option 元素不起作用。由于 select 项未触发渲染，因此结果大小不正确。

解决此问题的解决方法是使用 .remove() 添加和删除选项/.detach()和 .append()/.prepend()功能。

例如:

var options = [];

$("select[name='FormTypeId'] option").each(
    function() {
        options.push($(this).detach());
    }
);

$("select[name='FormTypeId']").prepend(options[0]);
$("select[name='FormTypeId']").prepend(options[20]);
$("select[name='FormTypeId']").prepend(options[70]);

http://jsfiddle.net/005x7wye/1/