javascript - 为什么 IE 不能在返回导航上重新构建动态修改的选择框？

Question

我有一个表单，这是为 SharePoint 列表自动生成的标准表单之一，我在其中添加了一层 JavaScript 来逐步增强它。一些选择框是查找。在页面加载时，当我只想要过滤的子集时，这些选择框包括查找列表中的所有项目。

我尝试使用CSS来隐藏不相关的选项，但是隐藏选项在浏览器中并不可靠。相反，我使用 jQuery 修改选择框内容以仅包含我想要的筛选子集。

但是，当用户离开页面然后使用后退按钮返回时，就会出现问题。 IE 恢复到选择框的值选择不正确。您可以看到当用户没有意识到这一问题之后保存表单时会出现问题。

在我看来，IE 并没有预料到我对选择框的动态修改。我相信 IE 会记住基于 selectedIndex 属性的选择，而不是实际选择的值。

Chrome 没有任何问题，可以很好地处理上述场景。

在向后导航中，我在重建选择框之前记录了它们的选择，但它们已经不正确了。

有人在 IE 中处理过这个问题并克服它吗？

Answer 1

在继续开发用于过滤查找列的前端解决方案之前，您可能需要考虑在目标列表中创建一个计算列，然后将查找指向该列。

假设您的查找列指向“People”列表和“Age”列，但您只希望查找列出 30 岁以下的年龄。而不是查找 Age 并使用 JS 删除所有超过 30 岁的选项，在“人物”中创建第二个名为“Age_Under_30”或类似名称的列。使用公式 =IF([Age]<30, [Age], "") 将其设为计算列。对于年龄小于 30 的所有记录，这将使其值等于年龄，否则为空。让您的查找列指向 Age_Under_30 而不是 Age，它只会在下拉框中列出 30 岁以下的年龄。

您可以根据需要将其更改为您的专栏；需要做的就是在计算列中定义过滤条件。

<小时/>

如果这不可能，您仍然可以使用 JavaScript 来修复它。您假设 IE 存储所选选项的索引而不是其 DOM 节点或文本是正确的。在删除不需要的选项之前保存 IE 在导航回页面时记住的索引，然后恢复它。

var myselect = $("#myselect")[0],
    saved_index = myselect.selectedIndex,
    nodes_to_remove = $("#3, #4");

nodes_to_remove.remove();

if(myselect.selectedIndex + nodes_to_remove.length !== saved_index) {
    myselect.selectedIndex = saved_index;
}

由于此问题不会在 Chrome(可能还有其他浏览器)中出现，并且不加区别地应用此修复程序会破坏那里的行为，因此我进行了行为检查，仅在浏览器显示差异时才执行此操作。如果您还有任何问题，请告诉我。