Question

我正在处理一个窗体，它有几个隐藏的div，设置为在单击单选按钮时显示/隐藏，选中复选框，或者在这种情况下，从下拉框中选择一个选项。

此时，当提交表单时，它将传递给服务器并返回一个HTML页面，其中包含缺少信息的必填字段列表。从那里，您可以单击返回并返回页面以输入必填字段并再次提交表单。我无法控制这个过程或服务器。

但是，当用户在浏览器（如Chrome，IE，Safari）上的所需字段页面上单击或返回按钮时，将再次隐藏应保留显示的所有div。我通过使用onLoad缓解了某些功能的问题，但在从下拉框中选择选项时问题仍然存在。

问题：如果在返回所有浏览器（Chrome，IE，Safari等）的页面/表单时选择了一个选项，我如何保留div显示？

注意：为此，我希望尽可能避免使用本地存储。此外，我尝试在这里寻找示例，但可用的解决方案似乎没有按预期工作，尽管由于缺乏使用jQuery的经验，我可能应该为此负责。

＆＃13;

$(document).ready(function() {
  $('#div1').hide();
  $("#location").change(function() {
    var selected_option = $('#location').val();
    if (selected_option === 'other') {
      $('#div1').show();
    } else {
      $('#div1').hide();
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<FORM METHOD="post" ACTION="test.cgi" id="form" name="myform">
  <label for="location" class="label-med">Location:</label>
  <SELECT id="location" class="input">
    <optgroup label="Locations">
      <OPTION SELECTED VALUE="">(Select One)</OPTION>
      <OPTION VALUE="1">1</OPTION>
      <OPTION VALUE="2">2</OPTION>
      <OPTION VALUE="3">3</OPTION>
      <OPTION VALUE="4">4</OPTION>
      <OPTION VALUE="5t">5</OPTION>
      <OPTION VALUE="6">6</OPTION>
      <OPTION VALUE="7">7</OPTION>
      <OPTION VALUE="8">8</OPTION>
      <OPTION VALUE="9">9</OPTION>
      <OPTION VALUE="10">10</OPTION>
      <option value="other">Other</option>
  </SELECT>
  <br>
  <br>
  <div id="div1" style="display:none">
    <label class="label-med" for="location">Location:</label>
    <INPUT TYPE="text" name="other_cunyloc" id="location" MAXLENGTH="80" SIZE="25" class="input"></INPUT>
  </div>
  <INPUT class="button" TYPE="SUBMIT" Value="Submit">
  </INPUT>
</FORM>

＆＃13;

这是我的jsfiddle。

如何在点击返回并返回表单页面后保留div（隐藏/显示）的状态？

0 个答案: