选择一个下拉菜单，更改JS值并重新加载页面

Question

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

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

如何使用Javascript做到这一点？ 我已经在这里和这里调查过，但是重新加载页面后，选择选项没有得到维护。

这是我的脚本：

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

谢谢

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

希望这项工作对您有用。

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

Answer 3

您必须将下拉菜单的值保存到一些全球可用的位置，例如Cookie或本地存储。

注意：此代码段不在此处运行，但可以正常运行。

 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>

Answer 4

最简短的答案是使用cookie。

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

下次重新加载页面时，检查cookie名称“ pick”（如果存在），选择其值，否则选择“ default”（默认）

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

我希望这可以按照您的要求进行。

选择一个下拉菜单，更改JS值并重新加载页面

问题描述

5 个解决方案

解决方案1
2 2017-11-25 05:18:23

解决方案2
1 已采纳 2017-11-25 05:31:56

解决方案3
1 2017-11-25 05:35:13

解决方案4
0 2017-11-25 05:22:42

解决方案5
0 2017-11-25 06:08:30

选择一个下拉菜单，更改JS值并重新加载页面

问题描述

5 个解决方案

解决方案1 2 2017-11-25 05:18:23

解决方案2 1 已采纳 2017-11-25 05:31:56

解决方案3 1 2017-11-25 05:35:13

解决方案4 0 2017-11-25 05:22:42

解决方案5 0 2017-11-25 06:08:30

解决方案1
2 2017-11-25 05:18:23

解决方案2
1 已采纳 2017-11-25 05:31:56

解决方案3
1 2017-11-25 05:35:13

解决方案4
0 2017-11-25 05:22:42

解决方案5
0 2017-11-25 06:08:30