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

Как можно сохранить выбранное значение в поле Select после обновления страницы или отправки формы на сервер?
  • 15 августа 2024 г. 10:53
Ответы на вопрос 2
Для изменения отображаемых полей в зависимости от выбранного значения в выпадающем списке можно использовать JavaScript. Вот пример:

```html
<select id="mySelect" onchange="showFields()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<div id="fields1" style="display:none">
  // Поля для Option 1
</div>

<div id="fields2" style="display:none">
  // Поля для Option 2
</div>

<script>
function showFields() {
  var selectValue = document.getElementById("mySelect").value;
  
  if(selectValue === "option1") {
    document.getElementById("fields1").style.display = "block";
    document.getElementById("fields2").style.display = "none";
  } else if(selectValue === "option2") {
    document.getElementById("fields1").style.display = "none";
    document.getElementById("fields2").style.display = "block";
  }
}
</script>
```

Чтобы сохранить выбранное значение в поле Select после обновления страницы или отправки формы на сервер, можно использовать cookies или localStorage в JavaScript. Вот пример с использованием localStorage:

```html
<select id="mySelect" onchange="saveChoice()">
  <option value="option1" selected>Option 1</option>
  <option value="option2">Option 2</option>
</select>

<script>
function saveChoice() {
  var selectValue = document.getElementById("mySelect").value;
  localStorage.setItem("selectChoice", selectValue);
}

document.addEventListener("DOMContentLoaded", function() {
  var savedChoice = localStorage.getItem("selectChoice");
  
  if(savedChoice) {
    document.getElementById("mySelect").value = savedChoice;
  }
});
</script>
```

Этот скрипт сохраняет выбранное значение в localStorage при изменении выбора в поле Select и восстанавливает его при загрузке страницы.
Нужно сохранять в localstorage выбор селекта, примерный код: <br/> <br/> function showField(option) { <br/> // Скрыть все поля <br/> document.querySelectorAll('.conditional-field').forEach(field => field.style.display = 'none'); <br/> <br/> // Показать поле, соответствующее выбранной опции <br/> if (option) { <br/> const field = document.getElementById(`${option}Field`); <br/> if (field) { <br/> field.style.display = 'block'; <br/> } <br/> } <br/> } <br/> <br/> // Инициализация состояния выбора при загрузке страницы <br/> document.addEventListener('DOMContentLoaded', () => { <br/> const selectField = document.getElementById('selectField'); <br/> <br/> // Загрузить сохраненное значение из localStorage <br/> const savedOption = localStorage.getItem('selectedOption'); <br/> if (savedOption) { <br/> selectField.value = savedOption; <br/> showField(savedOption); <br/> } <br/> <br/> selectField.addEventListener('change', (event) => { <br/> const value = event.target.value; <br/> showField(value); <br/> <br/> // Сохранить выбранное значение в localStorage <br/> localStorage.setItem('selectedOption', value); <br/> }); <br/> });
Похожие вопросы