Предположим, что мы используем элемент <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

Каждый раз, при выборе варианта, должна быть загружена нужная страница и целевой вариант должен быть отмечен, как выбранный. Мы рассмотрим два похожих метода, оба реализуют это.

Первый метод

Для первого метода, нужно сделать следующие вещи:

1. Получаем url соответствующей страницы от выбранного параметра и перенаправляем на эту страницу.
2. Перебираем все параметры, берём значение их атрибута 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).

Второй метод

Второй метод очень похож на первый, но использует преимущества локального хранилища.

Для этого метода, нам нужно сделать следующее:

1. Получить URL-адрес страницы, связанной с выбранным вариантом, сохранить его в локальном хранилище и принудительно перенаправьте на эту страницу.
2. Пройтись по всем вариантам, взять значение их 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. Там и увидимся!