如何在站点重新启动或单击按钮后激活选择值答案

【问题标题】：How to make select value active after site reboot or button click如何在站点重新启动或单击按钮后激活选择值
【发布时间】：2020-07-14 07:51:14
【问题描述】：

代码：

<form method="post">
    <input type="text" name="domnam" placeholder="Domain name"> </input>


    <select class="sel">
     <option value="Subdomain">Subdomain</option>
     <option value="IP">IP</option>
     <option value="WhoIS">WhoIS</option>
     <option value="Alexa">Alexa</option>
    </select>

     <input type="submit" value="Check" class="submitter"></input>
 </form>

单击按钮或重新启动后，页面选择值不会改变。 LocalStorage 也不起作用。

$('.sel').on('change', function() {
    localStorage.setItem('todoData', $('.sel').val());

if (localStorage.getItem('todoData')){
    $('.sel').val(localStorage.getItem('todoData'));
}
});

【问题讨论】：

这就是你关闭输入元素的方式——你也在change上做所有这些事情

标签： javascript html css frontend

【解决方案1】：

正确关闭括号
使用文档就绪处理程序在页面完全加载后对其进行操作。

$('.sel').on('change', function() {
    localStorage.setItem('todoData', $('.sel').val());
});

$(document).ready(function() {
    if (localStorage.getItem('todoData')){
        $('.sel').val(localStorage.getItem('todoData'));
    }
});

【讨论】：

答案不应该只编码。请添加一些解释这将如何解决 OP 的问题。

【解决方案2】：

您的代码和 HTML 中存在一些问题

您没有正确关闭输入使用/> 关闭输入
在更改时使用内部的 getItem 将不起作用，因为您从下拉列表中选择了一些内容以使 getItem 起作用。
另外，考虑使用window.localStorage 而不是localStorage

将您的HTML 和jQuery 更改为以下内容以使用localStorage

此代码已经过测试，可在我的网站上运行。

HTML

<input type="text" name="domnam" id="domain_name" placeholder="Domain name" />

<select class="sel">
 <option value="Subdomain">Subdomain</option>
 <option value="IP">IP</option>
 <option value="WhoIS">WhoIS</option>
 <option value="Alexa">Alexa</option>
</select>

 <input type="submit" value="Check" class="submitter" />

jQuery

$('.sel').on('change', function() {
  window.localStorage.setItem('todoData', $('.sel').val());
  window.localStorage.setItem('domainName', $('#domain_name').val());
});

if (window.localStorage.getItem('todoData')){
    $('.sel').val(window.localStorage.getItem('todoData'));
    $('#domain_name').val(window.localStorage.getItem('domainName'));
}

【讨论】：

【解决方案3】：

只需将您的localStorage.getItem 放在onchange 之外。

window.onload = function () {
    if (window.jQuery) {
        if (window.localStorage.getItem('todoData')) {

            document.getElementById("mySelect").value = window.localStorage.getItem('todoData');
        }

        $('.sel').on('change', function () {
            console.log($('.sel').val());
            window.localStorage.setItem('todoData', $('.sel').val());
        });

        console.log("JQuery is loaded.");
    } else {
        console.log("JQuery is not loaded.");
    }
}

过去我通过sn-p添加了答案，由于Block third-party cookies and site data的目的，没有找到localStorage。

【讨论】：

您的 HTML 不正确。请查看您的答案 - 答案不应仅编码。请添加一些解释如何解决OP的问题。
@AlwaysHelping，它在我的浏览器中工作。我认为这也应该适用于 sn-p。但是由于Block third-party cookies and site data 这个，localStorage 没有找到。我更新了它。非常感谢。