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

Question

[alex_lemurski]

Вопрос состоит не столько в том как отображать те или иные поля по Select, а как сделать так чтобы после обновления страницы (F5) или после ее сохранения (отправки формы на сервер) и снова заходя на эту страницу отображаемое поле по Select не исчезало?



оба варианта скрипта работают нормально, но не обеспечивают отображение выбранных полей на странице

Comments

[Ankhena]

Использовать localStorage, легко гуглится

[Ankhena]

alex_lemurski, ну и что не получилось из нагугленного?

[alex_lemurski]

не получилось из нагугленного

[alex_lemurski]

еще раз убеждаюсь что 90% ответчиков просто не читают вопрос и кусок кода который к нему прицеплен
как только в вопросе по JS прочиталось фраза "сохранить на странице состояние..." и т.п. все как инкубаторские начинают топить за LocalStorage, хотя тут он совсем ни к месту, и близко.
мне самому стыдно что я сам так долго не смог найти решения, а оно было плевым
удачи в гуглении!

Answer 1

[Евгений Петров]

Нужно сохранять в localstorage выбор селекта, примерный код:

function showField(option) {
// Скрыть все поля
document.querySelectorAll('.conditional-field').forEach(field => field.style.display = 'none');

// Показать поле, соответствующее выбранной опции
if (option) {
const field = document.getElementById(`${option}Field`);
if (field) {
field.style.display = 'block';
}
}
}

// Инициализация состояния выбора при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
const selectField = document.getElementById('selectField');

// Загрузить сохраненное значение из localStorage
const savedOption = localStorage.getItem('selectedOption');
if (savedOption) {
selectField.value = savedOption;
showField(savedOption);
}

selectField.addEventListener('change', (event) => {
const value = event.target.value;
showField(value);

// Сохранить выбранное значение в localStorage
localStorage.setItem('selectedOption', value);
});
});

Comments

[alex_lemurski]

дело было не в LocalStorage, решение уже нашел
но за ответ спасибо!