Все потому что у вас значения 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
и пытаемся вытянуть из хранилища значение каждого.