下拉导航：如何在页面加载时维护所选选项

想象一下，您正在使用一个<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 而不是相对 URL，如下所示：

<option data-url="https://yoursite.com/category/animals">Animals</option>

CSS

默认情况下，浏览器对咱们可以应用于select元素的样式有限制。例如，没有用于样式化option元素的跨浏览器 CSS 方法。

考虑到这一点，让咱们添加一些 CSS 规则来增强select 所有浏览器的外观：

下拉导航：如何在页面加载时维护所选选项第1张 — 一个风格化的选择元素（和一个表情符号来说明咱们在哪个页面上）

以下是样式：

.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);
}

值得一提的是，许多强大的 javascript 库可用于操作select元素。两个例子是 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属性的值可能是绝对 url。在这种情况下，咱们可以将代码的第二部分更新如下：

// 2
for(const option of options) {
  const url = option.dataset.url;
  if(url === location.href) {
    option.setAttribute("selected", "");
    break;
  }
}

注意：selected 咱们可以在 HTML 中静态设置它，而不是通过 javaScript 将属性添加到相应的选项中。例如，在“动物”页面中，咱们可以将 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;
    }
  }
}