Question

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

更改＆＃34; var pick _＆＃34;的值基于此选项;
重新加载页面;和
在下拉列表中维护所选选项，并选择＆＃34; var pick _＆＃34;。

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

谢谢

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

最短的答案是使用cookies。

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

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

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

4 个答案: