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

Question

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

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

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

这里是下拉菜单应该一直看起来的样子（以及它在第一页加载时的样子）

这是 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>

Answer 1

只需将组合框的值复制回 select2 项中：

这里有一个工作示例：

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<script language="javascript">

// call when loaded (from the cache)
function PageShown()
{
  list = document.getElementsByName('COUNTRY');
  if (list.length > 0) // check we are on the search page and not on the search-result page
  {
  
      combo = document.getElementById('COUNTRY'); // Take the value of the combobox
      if (combo.value != "-1")
        $("select[name='COUNTRY']").val(combo.value).trigger("change");  // https://select2.org/programmatic-control/methods

      combo = document.getElementsByName('PRODUCT')[0]; // No id: use the name
      if (combo.value != "-1")
        $("select[name='PRODUCT']").val(combo.value).trigger("change");
        
  }
}
$(document).ready(function(){
    $(".js-example-basic-single").select2(); // use the class for initializing select2
    // https://stackoverflow.com/questions/17480040/select2-hiding-the-search-box
    // https://select2.org/searching#hiding-the-search-box
    $("select[name='PRODUCT']").select2({ minimumResultsForSearch: -1 });  // No search box shown (too less items)
});

</script>
</head>

<body onpageshow="PageShown()">
<SELECT NAME='COUNTRY' ID='COUNTRY' class="js-example-basic-single" SIZE='1'  style="width: 150px;">
<OPTION VALUE='-1'> -- Select all --</OPTION>
<OPTION VALUE='12204791' >France</OPTION>
<OPTION VALUE='12204721' >Belgium</OPTION>
<OPTION VALUE='12204735' >Netherlands</OPTION>
<OPTION VALUE='12204786' >Germany</OPTION>
<OPTION VALUE='12204744' >Italy</OPTION>
<</SELECT>
<BR><BR>
<SELECT class="js-example-basic-single" NAME='PRODUCT' SIZE='1'  style="width: 150px;">
<OPTION VALUE='-1'> -- Select all --
<OPTION VALUE='Apple' >Apple
<OPTION VALUE='Tomato' >Tomato
<OPTION VALUE='Pear' >Pear
</SELECT>
<BR><BR>
<button onclick="window.location.href='https://google.com';">Search ></button>
<p>
First select items in the comboboxes<br>
Click on the search button<br>
After clicking this button, go back with the back button of the browser
</body>
</html>

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1