2

Возникает ошибка при изменение значения value, разметка:

<select id="fruit">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
</select>

js-код:

<script>
document.getElementById("fruit").onchange = function() {
    localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit')) {
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}
</script>

Все работает нормально, но при изменении value:

<select id="fruit">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
    <option value="fourth">4</option>
</select>

Сохранение выбранных значений перестает работать

1 ответ 1

3

Все потому что у вас значения option value идут по порядку (0,1,2...) - после вы их используете как индексы для доступа к элементам массива getElementById("fruit").options. Если вы поставите значения с 1 или перемешаете список option, уже будет нарушена подстановка прошлого выбранного элемента.

Вам требуется находить необходимый option исходя из его value значения, например так:

if (localStorage.getItem('fruit')) {
    let savedValue = localStorage.getItem('fruit');
    let option = document.querySelector('#fruit > option[value="' + savedValue + '"]');
    if (option) {
        option.selected = true;
    }
}

Тестить!

Для мульти селекторов предлагаю следущее решение (с использованием jQuery):

HTML (обязательно провайдните id и добавьте на требуемые селекторы класс save-selector):

<select id="fruit1" class="save-selector">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
    <option value="fourth">4</option>
</select>

<select id="fruit2" class="save-selector">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
    <option value="fourth">4</option>
</select>

JS:

$('.save-selector').change(function() {
  localStorage.setItem('selector-' + this.id, this.value);
});

$('.save-selector').each(function() {
  let value = localStorage.getItem('selector-' + this.id);
  if (value) {
    this.value = value;
  }
});

Суть проста: подписываем все селекторы с классом save-selector на событие change, сохраняем каждого в локальное хранилище с префиксом selector-. Далее при загрузки страницы надо просто пройтись по всем селекторам с классом save-selector и пытаемся вытянуть из хранилища значение каждого.

5
  • Спасибо за ответ, в случае, если select-ов будет несколько fruit, fruit-1, fruit-2, fruit-3 стоит дублировать для каждого селекта этот код или можно как-то сократить его, или изменить поиск элемента не по id, а например по классу?
    – job.js.org
    5 июн 2017 в 6:50
  • @Эмиль разрешено ли использовать jQuery?
    – MihailPw
    5 июн 2017 в 6:57
  • да, если это хорошее решение))
    – job.js.org
    5 июн 2017 в 7:05
  • @Эмиль обновил ответ.
    – MihailPw
    5 июн 2017 в 7:18
  • geniusly, @AGS17
    – job.js.org
    5 июн 2017 в 7:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.