Question

<select id="country_name" onchange="changeCounty();">
<option value="IND"> IND</option>
<option value="US">US</option>
<option value="JP">JP</option>
<option value="UK">UK</option>
</select>

我有上面的代码。当我选择一个选项时，它会对页面进行一些更改。但是当我在浏览器的新选项卡中打开页面时，已经选择的选项会重置。和默认选择的选项集。我如何处理这个？

Answer 1

您需要一些东西将值从一个页面传递到另一个页面，因为选项卡默认情况下是完全独立的页面。

一种解决方法可能是这样的（使用LocalStorage）：

// Save value when it is changed by user
function changeCounty(){
  if(window.localStorage){
   var inputValue = document.getElementById('country_name').value
   window.localStorage.set('mySavedValueName',inputValue )
  }
  //..your original code
}

// Load value if it exists
window.addEventListener('load', function getContryFromLS(){
  if(window.localStorage){
    var lsvalue = window.localStorage.get('mySavedValueName')
    if(lsvalue)
      document.getElementById('country_name').value=lsvalue 
  }
}

Answer 2

您的Html代码

<select id="country_name" onchange="changeCounty(this);">
<option value="IND"> IND</option>
<option value="US">US</option>
<option value="JP">JP</option>
<option value="UK">UK</option>
</select>

JQuery代码

 $(function(){
    var d=localStorage.getItem("selectval"); 
    if(d!=null){
        console.log(d);
        $("#country_name").val(d);
   }
    $("#country_name").change(function(){
       localStorage.setItem("selectval",$(this).val());
    });

});

Demo Here

在新浏览器窗口选项卡中选择选项不设置

2 个答案: