javascript - 在页面重新加载时保留下拉选择

Question

我在这样的页面上有一个选择列表：

<select name='elements'>
    <option value='water'>Water</option>
    <option value='fire'>Fire</option>
    <option value='air'>Air</option>
</select>

编辑：当用户进行选择时，当前页面会刷新，但是如何在页面刷新后保持用户的选择在列表中可见？换句话说，我不希望列表回滚到其默认选定值。

请帮忙

Answer 1

这是一个仅限 Javascript 的解决方案。

 <select name='elements' id='elements' onChange='window.location="yoururl.html?value=" + this.value;'>
     <option value='water'>Water</option>
     <option value='fire'>Fire</option>
     <option value='air'>Air</option>
 </select>

然后你使用这个函数来查看value参数是否被设置并获取它，你可以使用 jQuery 将它设置为selected.

$("#elements option[value='" + result_of_gup + "']").attr("selected","selected") ;

Answer 2

 <select name='elements' onChange='window.location="yoururl.php?value=" + this.value;'>
     <option value='water'>Water</option>
     <option value='fire'>Fire</option>
     <option value='air'>Air</option>
 </select>

Answer 3

在没有 jQuery 的情况下这样做：

然后创建window.location.getParameter()函数（参见Anatoly Mironov的此处）：

<select name='elements' id='elements' onChange='window.location="yoururl.html?elements=" + this.selectedIndex;'>
   <option value='water'>Water</option>
   <option value='fire'>Fire</option>
   <option value='air'>Air</option>
</select>

<script type="text/javascript">
  els = document.getElementById('elements');
  selIndex = window.location.getParameter('elements') || 0;
  els[selIndex].selected = true;​
</script>

为了方便参考，我在下面重现了Anatoly的优秀.getParameter功能：

window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
};