如何刷新选择了相同选择的页面？ （玉/ HTML）

Question

我正在使用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
   });

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

Answer 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());

Answer 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>