Javascript 选择下拉列表，更改JS值并重新加载页面

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

根据此选项更改“var pick_3;”的值

重新加载页面；及

在下拉列表中维护所选选项并选择“var pick_3;”

如何使用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(); 
}

var选取=1
1.
2.
3.
4.
5.
函数getSelectValue（selectID）{
pick=document.getElementById（selectID）.value；
location.reload（）；
}

---

谢谢

如果要持久保存变量数据，可以使用本地存储或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(); 
}

<代码>var pick\u=1 1. 2. 3. 4. 5. 函数getSelectValue（selectID）{ pick=document.getElementById（selectID）.value； localStorage.pick\u=pick\u pick_=localStorage.getItem（“pick_”）； location.reload（）； }

---

希望这对您有用。

如果您想持久保存变量数据，可以使用本地存储或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(); 
}

var选取=1
1.
2.
3.
4.
5.
函数getSelectValue（selectID）{
pick=document.getElementById（selectID）.value；
localStorage.pick\u=pick\u
pick_=localStorage.getItem（“pick_”）；
location.reload（）；
}

---

希望这对你有用。

最简单的答案是使用cookies

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

---

下次重新加载页面时，检查cookie名称“pick”（如果存在），选择其值，否则选择默认值。最短的答案将是使用cookies

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

---

下次重新加载页面时，检查cookie名称“pick”（如果存在），选择其值，否则选择默认值这实际上与sultan khan的答案使用相同的技术，但重新加载后需要检索该值

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>

1.
2.
3.
4.
5.

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

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>

1.
2.
3.
4.
5.

您必须将下拉列表的值保存到一些全局可用的位置，如cookie或本地存储

注意：代码段不在这里运行，但可以正常工作

函数getSelectValue（selectID）{ 拾取=document.getElementById（'selectX'）。值； setItem（“lastSelectedValue”，选择）； location.reload（）； } 函数getLastSelectedValue（）{ var value=localStorage.getItem（“lastSelectedValue”） 如果（值） { document.getElementById（'selectX'）。value=value； } }

选择1
选择2
选择3
选择4
备选案文5

您必须将下拉列表的值保存到一些全局可用的位置，如cookie或本地存储

注意：代码段不在这里运行，但可以正常工作

函数getSelectValue（selectID）{ 拾取=document.getElementById（'selectX'）。值； setItem（“lastSelectedValue”，选择）； location.reload（）； } 函数getLastSelectedValue（）{ var value=localStorage.getItem（“lastSelectedValue”） 如果（值） { document.getElementById（'selectX'）。value=value； } }

选择1
选择2
选择3
选择4
备选案文5

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

为了实现这一目标，我做了以下工作：

给选项一个值

创建一个函数来设置URL中的参数

setSelectValue（键，值）

创建一个函数，在重新加载页面时获取此值

getParameter（名称、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>

1.
2.
3.
4.
5.
var pick_u2;=getParameter（“id”）；
var selectedOption=document.getElementById（“selectX”）；
selectedOption.options[（pick_-1）].setAttribute（“selected”、“selected”）；
函数setSelectValue（key，value）{//我们可以像这样在URL中设置一个参数
key=encodeURI（key）；
value=encodeURI（值）；
var kvp=document.location.search.substr（1）.split（'&'）；
var i=kvp.长度；
var x；
而(我--)//
{
x=kvp[i]。拆分（'='）；
如果（x[0]==键）
{
x[1]=数值；
kvp[i]=x.join（'='）；
打破
}
}
if（i<0）{
kvp[kvp.length]=[key，value].join（'='）；
}
document.location.search=kvp.join（'&'）；
}
函数getParameter（name，url）{//然后我们可以像这样返回url
如果（！url）
url=window.location.href；
name=name.replace（/[\[\]]/g，\\$&）；
var regex=new RegExp（“[？&]”+name+”（=（[^&#]*）和|#|$），
结果=regex.exec（url）；
如果（！结果）
返回1；//如果没有参数，则返回第一个选项
如果（！结果[2]）
返回“”；
返回组件（结果[2]。替换（/\+/g，”）；
}

---

我希望这符合你的要求

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

为了实现这一目标，我做了以下工作：

给选项一个值

创建一个函数来设置URL中的参数

setSelectValue（键，值）

创建一个函数以在pag