如何刷新具有相同选择的页面？ (翡翠/HTML)答案

【问题标题】：How can I refresh a page with the same selection selected? (Jade/HTML)如何刷新具有相同选择的页面？ (翡翠/HTML)
【发布时间】：2015-10-27 20:23:58
【问题描述】：

我正在使用 Jade 在网页上创建一个下拉列表。我想让这个网页在选择一个项目时不断地重新加载（可能是某个时间间隔），但我希望它在仍然选择相同的选择的情况下重新加载。

使用 meta(http-equiv='refresh', content='30') 之类的东西可能对我有用，但它只会每 30 秒重新加载一次原始页面，而不是列表中已包含所选项目的页面已选中。

这是我的代码：

select(id="foo", multiple="2", size=listStuff.length)
    each val in listStuff
    option(value=val)=val

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

        //insert what the selection displays when changed
   });

我知道我在使用 Jade，但欢迎任何 html 经验，因为我可以在两种语言之间进行转换。

【问题讨论】：

您需要创建一个cookie 或使用localstorage 来存储选定的值，然后在重新加载时检查该值。
或者使用url的查询部分...
当你在下拉列表中选择了一个项目时，url不会改变，这就是为什么我不能说刷新这个url。
对，你必须通过添加?selection=1 或其他东西来修改它，然后在重新加载时阅读它，类似于第一条评论...
@Nicole Pinto 在 setInterval 函数中设置此项：window.location.href = window.location.href.split('?')[0] + "?selection=" + $("#foo").val();

标签： javascript jquery html pug

【解决方案1】：

因此您需要在刷新后将选项保留在选择中。您有几个选择，使用会话/本地存储 api 或将其设置在 cookie 中。

使用会话存储：

$('#foo').on('change', function(context) {
    sessionStorage.setItem("foo", $("#foo").val());
});

然后在页面加载时

$('#foo').val(sessionStorage.getItem("foo"));

如果在 cookie 上，你会使用类似 (jQuery cookie)

$.cookie("foo",  $("#foo").val());

【讨论】：

【解决方案2】：

以下是使用 URL 中的查询字符串的示例。
我使用select 元素的id 作为查询字符串名称。

window.addEventListener('load', initPage, false);

var elSelect;  // select element

function initPage(sender) {
    var selectionValue;  // selection from url

    // get select, set value, refresh page in 30 seconds
    elSelect = document.getElementById('foo');
    selectionValue = getQueryString(elSelect.id);
    if (selectionValue) {
        elSelect.value = selectionValue;
    }
    setTimeout(refreshPage, 30000);
}

function refreshPage(sender) {
    var newUrl;  // url to load

    // set new query portion, reload
    newUrl = "?" + elSelect.id + "=" + elSelect.value;
    window.location.href = window.location.href.split('?')[0] + newUrl;
}

// get query string value by name
function getQueryString(sParm) {
    var asParms;  // query String parameters array

    var sLocation;  // location URL
    var sParmName;  // parameter name
    var sParmVal;   // parameter value

    // return false if not found
    sParmVal = false;

    // split query portion of url, look for sParm name
    sLocation = location.search.substring(1, location.search.length);
    asParms = sLocation.split("&");
    for (var i = 0; i < asParms.length; i++) {
        sParmName = asParms[i].substring(0,asParms[i].indexOf("="));
        if (sParmName === sParm) {
            sParmVal = asParms[i].substring(asParms[i].indexOf("=") + 1)
        }
    }

    return sParmVal;
}

<select id="foo">
  <option value="1" selected>fe</option>
  <option value="2">fi</option>
  <option value="3">fo</option>
</select>

【讨论】：