Question

我有一个jquery脚本，当从选择下拉列表中进行选择时，它会显示div。它工作正常，但我想知道如何在页面重新加载后保持页面上的div。这是脚本：

$(document).ready(function() {
  $("select").change(function() {
    var color = $(this).val();
    if (color == "Yes") {
      $(".box").not(".Yes").hide();
      $(".Yes").show();
    } else if (color == "No") {
      $(".box").not(".No").hide();
      $(".No").show();
    } else {
      $(".box").hide();
    }
  });


});

<div>
Is this to be a subdomain?<select name="setweb">
      

		<option selected disabled>Please Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>

    </select>
</div>
<br />

<div class="Yes box" style="display:none">
<input type='text' class='text' name='business' size='20' />Enter your subdomain in the text box.





</div>
<div class="No box" style="display:none">
<input type='text' class='text' name='business' size='20' />Enter your domain in the text box.
</div>




<br/>

谢谢你的帮助。

Answer 1

使用本地存储

＆＃13;

$(document).ready(function() {
	if(localStorage.getItem("elementToShow")) {
  	$(localStorage.getItem("elementToShow")).show();
  }
  $("select").change(function() {
    var color = $(this).val();
    if (color == "Yes") {
      $(".box").not(".Yes").hide();
      localStorage.setItem("elementToShow", ".Yes");
      $(".Yes").show();
    } else if (color == "No") {
      $(".box").not(".No").hide();
      localStorage.setItem("elementToShow", ".No");
      $(".No").show();
    } else {
      $(".box").hide();
    }
  });


});

＆＃13;

<div>
Is this to be a subdomain?<select name="setweb">
      

		<option selected disabled>Please Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>

    </select>
</div>
<br />

<div class="Yes box" style="display:none">
<input type='text' class='text' name='business' size='20' />Enter your subdomain in the text box.





</div>
<div class="No box" style="display:none">
<input type='text' class='text' name='business' size='20' />Enter your domain in the text box.
</div>




<br/>

＆＃13;

Answer 2

您可以使用Cookie在页面重新加载中存储一些数据。没有其他简单的解决方案......

另见https://www.w3schools.com/js/js_cookies.asp

您可以在更改时设置Cookie

document.cookie = "select=somevalue"

然后

$(document).ready(function () {
    var select = document.cookie.split(";")[0] ? document.cookie.split(";")[0].split("=")[0] : null

    if (select) {
        // manually trigger the change
    }
})

修改1

＆＃34;没有其他简单的解决方案......＆＃34; ...除了localStorage：D @Nidhin Chandran

取消隐藏div然后在页面重新加载后保留div

2 个答案: