我如何重新加载从下拉列表中自动选择某个 selectedIndex 的页面？

Question

我有一个外部列表，正在读取该列表以形成我网页上的 select 列表中的值。当一个项目被 selected 时，它会更新位于另一个代码区域的 3 个条形图。我在 on(change) 函数下使用 setItem() 来本地保存列表的 selectedIndex 值。然后在代码的顶部，我使用 getItem() 获取相同的索引值并将其设置为等于变量 id。我的页面每 30 秒自动刷新一次。我想获取 "idx" 的值，并在页面重新加载时自动将其设置为 select 相同的索引。这样它会重新加载最后一个 selected 索引，而不是重置为未selected。

.script
    window.onload = function() {
      var idx = localStorage.getItem(document.title.toLowerCase() + '-selectedIndex');
      console.log('last selected index : ' + idx);
    //*****what would I put here that uses the value idx to have the same index automatically selected when the page reloads
};


$('#foo').on('change', function(context) {


  var bar1 = $('#progressbar1');
  var bar2 = $('#progressbar2');
  var bar3 = $('#progressbar3');


  localStorage.setItem(document.title.toLowerCase() + '-selectedIndex', this.selectedIndex);

  bar1.val(globalSheetResults1[this.selectedIndex]);
  bar2.val(globalSheetResults2[this.selectedIndex]);
  bar3.val(globalSheetResults3[this.selectedIndex]);

Answer 1

一个可能的解决方案是使用 cookie，这样您就可以检查是否选择了一个值，从而生成您的图表。

查看插件：

https://github.com/carhartl/jquery-cookie

然后你可以这样做：

$.cookie("foo", 'bar');

要删除：

$.removeCookie("test");

因此您可以检查 cookie 是否存在 onload 并将其设置为更改。

你可以看到关于那个插件的完整解释here

Answer 2

您只需在页面加载时设置选项元素的 selectedIndex，然后触发更改事件。所以，像这样：

document.getElementById('foo').selectedIndex = idx;
$('#foo').change();

我如何重新加载从下拉列表中自动选择某个 selectedIndex 的页面？

How would I reload a page with a certain selectedIndex automatically selected from a dropdown list?

javascript

jquery

pug

selectedindex