JS Как подружить select+option и localStorage

229
27 мая 2018, 06:20

Помогите разобраться.

Есть select, в зависимости от выбора пользователя в id=contact_method подставляются разные номера телефонов.

Теперь необходимо реализовать localStorage чтобы пользователю не приходилось на следующей странице опять выбирать значение из select.

Используя код ниже localStorage работает только для option, как исправить чтобы localStorage работал для option и id=contact_method одновременно?

<select id="contactSelect">
<option value="0">Россия</option>
<option value="1">Беларусь</option>
</select>
<p id="contact_method">+7</p>

JS 1) Функция для замены номера телефона в зависимости от выбора в select

 document.getElementById("contactSelect").onchange = function() {
        var value = this.options[this.selectedIndex].value;
        if(value == '1') {
            document.getElementById("contact_method").innerHTML = '+375';
        } else {
            document.getElementById("contact_method").innerHTML = '+7';
        }
    }

2) Функция для localStorage

 document.getElementById("contactSelect").onchange = function() {
        localStorage.setItem('contactSelect', document.getElementById("contactSelect").value);
    }
    if (localStorage.getItem('contactSelect')) {
        document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
    }
Answer 1
if (localStorage.getItem('contactSelect')) {
  document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
  document.getElementById("contactSelect").onchange(); 
}

Несколько слов не для протокола, а "для души". Вы два раза присваиваете значение свойству document.getElementById("contactSelect").onchange. Второе присваивание, естественно, отменяет первое. Чтобы прикрепить несколько обработчиков к одному событию, используйте addEventListener:

function updateContactMethod() {
  var value = this.options[this.selectedIndex].value;
  if(value == '1') {
    document.getElementById("contact_method").innerHTML = '+375';
  } else {
    document.getElementById("contact_method").innerHTML = '+7';
  }
}
document.getElementById("contactSelect").addEventListener("change", updateContactMethod);
document.getElementById("contactSelect").addEventListener("change", function() {
  localStorage.setItem('contactSelect', document.getElementById("contactSelect").value);
});
if (localStorage.getItem('contactSelect')) {
  document.getElementById("contactSelect").options[localStorage.getItem('contactSelect')].selected = true;
  updateContactMethod.call(document.getElementById("contactSelect"));
}
READ ALSO
Отображение v-checkbox в v-data-table

Отображение v-checkbox в v-data-table

необходимо в v-data-table отображать CheackBox: использую гайд, но если я переменную value изменяю с false на true CheackBox на странице отображается как "не выбранный"

206
почему не работает функция autoslider js

почему не работает функция autoslider js

нужно чтобы слайдер срабатывал по таймеру почему не работает незнаю

209
Как вернуть переменную из then() [дубликат]

Как вернуть переменную из then() [дубликат]

На данный вопрос уже ответили:

226