Question

看到我有一个包含选择下拉列表和2个文本框的表单。在一个文本框中单击选项我将转到包含联系人列表的一个页面。我正在追加该页面的值，并且我又回到了我的旧页面。在此之后我在下拉选择列表中更改的值，然后将其更改为默认值为1.并不保持与之前相同。我的代码。这是我的html表单。

   <body onload="main();">
        <select id="privacy" onchange="getPri(this)">
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                  </select>
                  <input type="text" value="choose contacts" id="to" onClick="window.location='contact.html';">
                  </input>

这是我的js

function getPri（sel） { var value = sel.value;

if(value=="2")
{ 

$("#to").show();
}
else
{
 $("#to").hide();

}}

在contact.html中，我正在处理联系人列表，我将其中的一个联系人附加到该联系人，并将其附加到同一文本框中，该文本框中包含了ID。

 function main()
              {
    var contact = "";
              if ( sessionStorage.getItem("contact") ) {
              contact = sessionStorage.getItem("contact");

              $("#to").val(postneedcontact);
}

现在问题是假设我选择了值2然后联系文本框将显示。现在点击这个后我能够追加这个值并且一切正常。问题是我现在选择的值已改变再次1.我希望它将它设置为我之前选择的2为2，因为如果选择1，则联系文本框将隐藏，如代码所示。那么任何解决方案吗？

Answer 1

假设联系人是新页面，为什么不尝试将选择框选择值保存到某个存储空间？

Answer 2

是的，我们可以使用像localstorage这样的webstorage来做到这一点，我使用localstorage做到了这一点。当用户从下拉列表中选择任何选项时，索引将保存在localstorage中，页面加载检索该索引并分配给下拉列表。

请注意，由于浏览器的本地存储，这不会在需要浏览器的在线编辑器上运行。请在浏览器中运行。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <script>
    var iVal;
    window.onload=function(){
        iVal=document.getElementById("privacy");
        iVal.selectedIndex=localStorage.getItem("PrivacyVal");
    };
        function getPri(){
            localStorage.setItem("PrivacyVal", iVal.selectedIndex);
        }
    </script>
    </head>
<body>
    <select id="privacy" onchange="getPri()">
            <option  >1</option>
            <option  >2</option>
            <option  >3</option>
            <option  >4</option>
    </select>

</body>
</html>

调用另一个html页面后，选择列表值不会保持不变

2 个答案: