Как сделать значение выбора активным после перезагрузки сайта или нажатия кнопки - PullRequest
Новая
       88

Как сделать значение выбора активным после перезагрузки сайта или нажатия кнопки

0 голосов
/ 14 июля 2020

Код: 

<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'));
}
});

Ответы [ 3 ]

0 голосов
/ 14 июля 2020
  1. Правильно закройте круглые скобки
  2. Используйте обработчик готовности документа для управления страницей после ее полной загрузки. 
$('.sel').on('change', function() {
    localStorage.setItem('todoData', $('.sel').val());
});

$(document).ready(function() {
    if (localStorage.getItem('todoData')){
        $('.sel').val(localStorage.getItem('todoData'));
    }
});
0 голосов
/ 14 июля 2020

В вашем коде есть несколько проблем и HTML

  1. Вы неправильно закрываете входы, используйте /> для закрытия входов
  2. Использование getItem внутри при изменении не приведет к работать, поскольку вы должны выбрать что-то из раскрывающегося списка, чтобы getItem работал.
  3. Также рассмотрите возможность использования 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'));
}
0 голосов
/ 14 июля 2020

Просто поместите 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.");
    }
}

Раньше я добавлял ответ по фрагменту, и из-за цели Block third-party cookies and site data localStorage не был найден.

...