Перезагрузка и обновление страницы выбором в select

При создании пользовательских форм с настройками, иногда бывает удобно делать автоматическую отправку формы, как только пользователь выберет новое значение у поля. Наглядно это можно продемонстрировать с помощью элемента select. Для примера воспользуемся простейшей формой с полем со списком:

<form method="get" id="MyForm">
Значение
<select name="val">
<option value="1">Значение 1</option>
<option value="2">Значение 2</option>
<option value="3">Значение 3</option>
</select>
</form>

На странице это будет выглядеть так:

Понятно, что для стандартной работы такой формы не хватает кнопки submit, по нажатию на которую и должна выполнятся отправка формы на сервер. Но, нам ведь и нужно выполнить эту процедуру без дополнительных кнопок, только по выбору значения в поле со списком. И на помощь нам приходит JavaScript.

У любых компонентов на форме есть различные события, в ответ на которые мы можем ставить свои скриптовые обработчики. В данном случае нам нужно событие обновления значения в поле со списком onchange. На это событие у нас должен выполняться код отправки формы:

document.getElementById('MyForm').submit()

Здесь, document.getElementById('MyForm') – позволяет выбрать объект (форму) по ее ID.

submit() – команда, отправляющая форму аналогично кнопке submit на форме.

В итоге, для решения задачи, собираем все вместе:

<form method="get" id="MyForm">
Значение
<select name="val" onchange="document.getElementById('MyForm').submit()">
<option value="1">Значение 1</option>
<option value="2">Значение 2</option>
<option value="3">Значение 3</option>
</select>
</form>

И получаем форму, которая будет отправляться выбором в поле со списком значения:

Так как выбран метод отправки формы GET адресной строке браузера можно видеть как при этом меняется url.