如何刷新選擇了相同選擇的頁面？ （玉/ 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>