小编Eli*_*mer的帖子

使用浏览器后退按钮后,Select2 下拉菜单不起作用

我目前正在处理一个包含多个 Select2 下拉列表的搜索页面。下拉菜单在第一页加载时效果很好,但只有在有人搜索然后点击浏览器后退按钮并返回页面时才会出现问题。加载下拉列表/输入的缓存值并出现问题。我的所有其他表单输入完全正常加载缓存,没有任何问题。

点击浏览器中的“后退按钮”后,带有 Select2 下拉菜单的搜索页面将再次加载,并且他们搜索的“缓存”值存储在他们之前输入的任何条目中。对于页面上除 select2 之外的所有输入法,缓存值都正确显示。当带有 Select2 的下拉列表加载时,显示的文本恢复为“所有单位”(意味着没有选择任何内容),这是我设置的占位符,但 Select2仍然设置为他们刚刚搜索的值。

这会产生一个令人困惑的问题,并迫使用户搜索他们之前选择的内容,而无法清除下拉列表。

这是下拉菜单的外观(以及它在第一页加载时的外观)

在此处输入图片说明

这是在用户点击后退按钮并返回页面后 select2 下拉列表的外观

在此处输入图片说明

起初看起来很正常,但是当您展开下拉列表时,您会发现选择了缓存值,但前提是您展开下拉列表:

在此处输入图片说明

选择了一个项目(他们之前选择的项目),但在实际值区域中并没有显示它被选中,它仍然显示“所有单位”。用户无法取消选择此值或知道它仍然存在。这导致用户必须重新启动页面或清除缓存才能“取消搜索”select2 值

这是我的代码,非常感谢您对这个令人困惑的问题的任何帮助。

@Html.DropDownListFor(model => model.UnitID, Model.unitIDL, new { @class = 
 "select2", style = "width: 165px" })

  <script type="text/javascript">
        $(".select2").select2(
            {
                allowClear: true,
                placeholder: "All Units"
            })
    </script>
Run Code Online (Sandbox Code Playgroud)

html javascript asp.net-mvc razor jquery-select2

5
推荐指数
1
解决办法
1181
查看次数

标签 统计

asp.net-mvc ×1

html ×1

javascript ×1

jquery-select2 ×1

razor ×1