Раскрывающийся список в HTML пуст при инициализации из-за Javascript - PullRequest
Новая
       4

Раскрывающийся список в HTML пуст при инициализации из-за Javascript

0 голосов
/ 03 февраля 2020

Я создал на веб-странице html выпадающий список с четырьмя параметрами. Это работало хорошо, но я понял, что при обновлении страницы значение будет сброшено до первого варианта. Поскольку я хотел, чтобы выбор пользователя был сохранен в памяти, я добавил фрагмент кода javascript, который где-то нашел.

Он работает очень хорошо, за исключением того, что при инициализации значение по умолчанию в раскрывающемся списке является пустым field.

Мне нужно, чтобы при инициализации отображался первый вариант.

Полагаю, это просто, но я совсем не знаю JavaScript. Не могли бы вы помочь?

Вот как выглядит код: 

<select name="options" id='dropdown'>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
 </select>


 <!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->

  <script type="text/javascript">

    var selectedItem = sessionStorage.getItem("SelectedItem");  
    $('#dropdown').val(selectedItem);

    $('#dropdown').change(function() { 
    var dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
    });
 </script>

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Я думаю, вам следует проверить, существует ключ SessionStorage или нет.

Я создал рабочий пример вашего кода: https://jsfiddle.net/vieckys/Lwv1n8p7/7/

Вот HTML Разметка: 

<select name="options" id='dropdown'>
  <option value="0" selected>--- select here ---</option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
  <option value="4">4th Option</option>
</select>

и JS Код 

 let selectedItem = sessionStorage.getItem("SelectedItem");

 if (selectedItem) {
    $('#dropdown').val(selectedItem);
 } else {
   $('#dropdown').val(0);
 }

 $('#dropdown').change(function() { 
    let dropVal = $(this).val();
    sessionStorage.setItem("SelectedItem", dropVal);
 });

Дайте мне знать, если у вас возникнут какие-либо проблемы с этим.

0 голосов
/ 03 февраля 2020

В зависимости от вашего сценария вы можете явно инициировать событие изменения после того, как значение установлено для раскрывающегося списка, используя trigger('change') в раскрывающемся списке выбора. Это запустит функцию изменения и сохранит начальное значение в sessionStorage. Итак, добавьте эту строку кода, $('#dropdown').trigger('change') что-то вроде: 

<script type = "text/javascript" >

var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);

$('#dropdown').change(function() {
  var dropVal = $(this).val();
  sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>
...