Навигация с выпадающим меню: как сохранить выбранный параметр при загрузке страницы
Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
Предположим, что мы используем элемент <select>
для навигации между страниц и, обычно, когда страница перезагружается, выбор возвращается к значению по умолчанию. Сегодня мы узнаем, как сохранить выбранный параметр так, что выбранная вами страница останется выбранной даже после обработки новой страницы. Чтобы продемонстрировать это, мы будем использовать демо-проект с несколькими статическими страницами. Давайте начнем!
Структура проекта
Структура проекта выглядит вот так — несколько HTML страниц с несколькими ресурсами:
selected-option-load/ ├── animals.html ├── cars.html ├── index.html ├── motorcycles.html ├── plants.html └── assets/ ├── css/ | └── style.css ├── img/ | └── down.svg └── js/ └── main.js
HTML
На каждой HTML странице есть элемент select
.
<select class="myselect"> <option data-url="index.html">All</option> <option data-url="animals.html">Animals</option> <option data-url="cars.html">Cars</option> <option data-url="motorcycles.html">Motorcycles</option> <option data-url="plants.html">Plants</option> </select>
Каждый параметр указывает на статическую страницу. Ссылка на соответствующую страницу хранится в атрибуте data-url
.
Данное меню выбора может содержать категории всех записей блога, как пример. Поэтому, так и предположим, что при выборе варианта All
, отобразятся все записи блога. Тогда, если мы выберем вариант Animals
, отобразятся записи, которые находятся в категории Animals
и так далее.
Атрибут data-url
может содержать абсолютный url, вместо относительного, вот так:
<option data-url="https://yoursite.com/category/animals">Animals</option>
CSS
По умолчанию, стили которые мы можем применить к элементу select
ограничены браузером. Например, для элемента option
нет кросс-браузерного метода CSS оформления.
Исходя из этого, давайте добавим несколько CSS правил, которые улучшат внешний вид select
во всех браузерах:

А вот и стили:
.myselect { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; max-width: 400px; padding: 6px 12px; border-radius: 4px; border: 1px solid #cbd1d8; font-size: 1rem; line-height: 1.5; background: #fff url(../img/down.svg) no-repeat center right 12px / 18px 18px; transition: all .2s ease-in-out; } /*IE*/ .myselect::-ms-expand { display: none; } .myselect:focus { outline: 0; border-color: #7bbaff; box-shadow: 0 0 0 3px rgba(0, 121, 250, .3); }
Стоит отметить, что для управления элементом select
доступно несколько мощных библиотек JavaScript. Вот два примера: Chosen.js и Select2.js.
JavaScript
Каждый раз, при выборе варианта, должна быть загружена нужная страница и целевой вариант должен быть отмечен, как выбранный. Мы рассмотрим два похожих метода, оба реализуют это.
Первый метод
Для первого метода, нужно сделать следующие вещи:
- Получаем url соответствующей страницы от выбранного параметра и перенаправляем на эту страницу.
- Перебираем все параметры, берём значение их атрибута
data-url
и проверяем, совпадает ли это значение с URL страницы. Если это так, мы отмечаем соответствующий вариант как выбранный и заканчиваем цикл.
Вот необходимый код:
const select = document.querySelector(".myselect"); const options = document.querySelectorAll(".myselect option"); // 1 select.addEventListener("change", function() { const url = this.options[this.selectedIndex].dataset.url; if(url) { location.href = url; } }); // 2 for(const option of options) { const url = option.dataset.url; if(location.href.includes(url)) { option.setAttribute("selected", ""); break; } }
Как уже обсуждалось выше, в реальном проекте значение атрибута data-url
может быть абсолютным. В таком случае мы можем обновить вторую часть нашего кода следующим образом:
// 2 for(const option of options) { const url = option.dataset.url; if(url === location.href) { option.setAttribute("selected", ""); break; } }
Примечание: вместо добавления атрибута selected
к соответствующему варианту посредством JavaScript, мы могли бы задать его статически в HTML. Например, на странице Животные мы могли бы добавить атрибут selected
к варианту Animals
. Однако, такой подход не лучший, поскольку на динамическом сайте все варианты (которые могут содержать категории записей) могут использовать одну и ту же страницу/шаблон (подробнее об этом в следующем уроке по WordPress).
Второй метод
Второй метод очень похож на первый, но использует преимущества локального хранилища.
Для этого метода, нам нужно сделать следующее:
- Получить URL-адрес страницы, связанной с выбранным вариантом, сохранить его в локальном хранилище и принудительно перенаправьте на эту страницу.
- Пройтись по всем вариантам, взять значение их
data-url
и проверить на совпадение со значением, сохранённым в локальном хранилище. Если совпадает, отмечаем этот вариант как выбранный и закрываем цикл.
Вот необходимый код:
const select = document.querySelector(".myselect"); const options = document.querySelectorAll(".myselect option"); // 1 select.addEventListener("change", function() { const url = this.options[this.selectedIndex].dataset.url; if(url) { localStorage.setItem("url", url); location.href = url; } }); // 2 if(localStorage.getItem("url")) { for(const option of options) { const url = option.dataset.url; if(url === localStorage.getItem("url")) { option.setAttribute("selected", ""); break; } } }
Примечание: у этого решения есть одно ограничение. Если мы переходим на страницу (напр. страницу Animals) не выбрав данный пункт в выпадающем меню, то данный параметр не будет выбран. Это происходит, потому что в локальном хранилище нет значения url
или сохранённое там значение не верно.
Выводы
В этом уроке, мы рассмотрели два метод для обработки выбранного варианта при загрузке страницы. Несмотря на то, что для демонстрации мы использовали статичные данные, я надеюсь вы поняли идею и сможете применить эти знания в ваших проектах.
В будущих уроках, мы проверим, как применить рассмотренные здесь методы на сайте WordPress. Там и увидимся!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post