即使刷新页面，jquery也会保持div可见-选择选项

Question

我搜索了这个网站和网络，但我没有找到任何可以解决我的问题的东西。

我有 4 个收音机，如果您选择显示/隐藏包含 4 个注册表单的 div。这完美无缺。

我有 2 个由包含和国家/地区填充的选择。这完美无缺。

我有 2 个问题：

1）我的问题是，如果你更新页面或者用户点击提交按钮，div消失了，也就是页面回到了初始状态。

我希望显示的 div 保持可见，即使在您刷新页面或模块验证出现错误时也是如此。

2）第二个问题总是当您重新加载包含“大陆”和国家/地区的页面2选择时，它们会返回初始状态，我不会停留在用户所做的选择上。

我希望用户选择的大陆和国家即使刷新页面也保持选中状态

我最近在学习jquery。

我希望有人帮我一把。

我希望尽可能清楚。

抱歉英语不好。

这是html代码：

<select id="continent" onchange="countryChange(this);" class="elementiForm">
      <option value="empty">Seleziona un Continente</option>
      <option value="Europa">Europa</option>    
      <option value="Nord America">Nord America</option>
      <option value="Sud America">South America</option>
      <option value="Asia">Asia</option>
      <option value="Oceania">Oceania</option>
      <option value="Africa">Africa</option>        
</select>

<label for="country" class="labelForm">Seleziona uno Stato</label>
      <select id="country" class="elementiForm">
      <option value="0" >Seleziona uno Stato</option>
</select>

<!-- below the div that contain the headlights form -->
<div id="contatti_RS" class="red box">
    societa form here ...
</div>

<div id="privato" class="green box">
    privato form here ...
</div>

<div id="ditta_professionista" class="blue box">
    ditta_professionista form here ...
</div>

<div id="associazione" class="black box">
    associazione form here ...
</div>

这是我用来显示/隐藏 div 的 jquery

$(document).ready(function () {

      $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="societa"){
                $(".box").hide();
                $(".red").show();
            }
            if($(this).attr("value")=="privato"){
                $(".box").hide();
                $(".green").show();
            }
             if($(this).attr("value")=="ditta_professionista"){
                $(".box").hide();
                $(".blue").show();
            }
            if($(this).attr("value")=="associazione"){
                $(".box").hide();
                $(".black").show();
            }



        });

这是我的 jquery，用于控制是否在页面刷新时选择收音机

$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
        });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});  

Answer 1

如果可能，使用 AJAX（jQuery 获取或发布）

如果无法使用 AJAX，您可以记住 cookie 中的设置。例如。你可以设置

exp = Date.now();
exp += 84600000; //validity one day
document.cookie = "mycookie=" + some_value + "expires=" +
    (new Date(d)).toGMTString();

重新加载后，您会解析 cookie (Read a javascript cookie by name) 并相应地设置页面状态。