选择一个下拉列表，更改 JS 值并重新加载页面答案

【问题标题】：Select a Dropdown, Change the JS Value and Reload the Page选择一个下拉列表，更改 JS 值并重新加载页面
【发布时间】：2017-11-25 05:12:44
【问题描述】：

我正在尝试编写一个脚本，当我从下拉框中选择一个选项时，它会执行以下操作：

根据此选项更改“var pick_”的值；
重新加载页面；和
在下拉菜单和“var pick_”中保留所选选项。

如何使用 Javascript 实现这一点？我查看了here 和here，但重新加载页面后选择选项没有得到维护。

这是我的脚本：

var pick_ = 1

<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

function getSelectValue(selectID){
     pick_ = document.getElementById(selectID).value;
     location.reload(); 
}

谢谢

【问题讨论】：

标签： javascript html

【解决方案1】：

如果您想持久化可变数据，可以使用本地存储或 cookie 或任何服务器端进行存储。

var pick_ = 1

<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

function getSelectValue(selectID){
     pick_ = document.getElementById(selectID).value;
     localStorage.pick_ =pick_ 
     pick_ = localStorage.getItem("pick_");
     location.reload(); 
}

希望这对你有用。

【讨论】：

【解决方案2】：

这实际上与苏丹汗的回答使用了相同的技术，但是您需要在重新加载后检索该值。

window.addEventListener('load', function(){
    if (localStorage.pick) {
        var sel = document.querySelector('#selectX');
        sel.value = localStorage.pick;
    }
});

function getSelectValue(){
    var sel = document.querySelector('#selectX');
    localStorage.pick = sel.value;
    location.reload();
}

然后在你的 HTML 中

<select id = "selectX" onchange = "getSelectValue();">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

【讨论】：

虽然这个答案有效，但将任意数据保存到 cookie 是不好的做法。这就是 DOM 变成 slug 的方式。仅在绝对必要时使用 cookie。
@SynchroDynamic 它的哪个代码使用cookie？你没看到它使用localStorage吗？

【解决方案3】：

您必须将下拉菜单的值保存到某个全局可用的位置，例如 cookie 或本地存储。

注意：sn-p 不会在此处运行，但可以正常工作。

function getSelectValue(selectID){
         pick_ = document.getElementById('selectX').value;
         localStorage.setItem("lastSelectedValue", pick_); 
         location.reload(); 
}
function getLastSelectedValue(){
         var value = localStorage.getItem("lastSelectedValue")
         if(value )
         {
            document.getElementById('selectX').value = value  ;
         }
}

<html>
<body onload = 'getLastSelectedValue()'>
<select id = "selectX" onchange = "getSelectValue('selectX');">
     <option>option 1</option>
     <option>option 2</option>
     <option>option 3</option>
     <option>option 4</option>
     <option>option 5</option>
</select>
</body>
</html>

【讨论】：

localStorage与cookie不同，最好重命名函数以避免混淆
@am05mhz 感谢您指出这一点。我已经更新了代码 sn-p。

【解决方案4】：

最短的答案是使用 cookie。

function getSelectValue(selectID){
    pick_ = document.getElementById(selectID).value;
    document.cookie = "pick="+pick_;
    location.reload(); 
}

下次重新加载页面时检查 cookie 名称“pick”是否存在，选择它的值，否则选择默认值

【讨论】：

【解决方案5】：

如果您需要重新加载页面，则可以在 URL 中设置参数。然后就可以获取参数了。还有很多其他方法可以做到这一点，我怀疑是否有理由以任何方式存储它。

为此，我做了以下工作：

给选项一个值。
创建一个函数来设置URL中的参数setSelectValue(key, value)
创建一个函数以在页面重新加载时获取此值getParameter(name, url)

那你就尽情享受吧！

<select id = "selectX" onchange="setSelectValue('id', this.value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<script>
    var pick_ = getParameter("id");
    var selectedOption = document.getElementById("selectX");
    selectedOption.options[(pick_ - 1)].setAttribute("selected", "selected");
    function setSelectValue(key, value) {//We can set a Parameter in our URL like this
        key = encodeURI(key);
        value = encodeURI(value);
        var kvp = document.location.search.substr(1).split('&');
        var i = kvp.length;
        var x;
        while (i--)//
        {
            x = kvp[i].split('=');
            if (x[0] === key)
            {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }
        if (i < 0) {
            kvp[kvp.length] = [key, value].join('=');
        }
        document.location.search = kvp.join('&');
    }
    function getParameter(name, url) {//We can then return the URL like this
        if (!url)
            url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
        if (!results)
            return 1;//if no parameters return the first option
        if (!results[2])
            return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
</script>

我希望这能满足您的要求。

【讨论】：