从后端获取数据加载下拉选项_下拉导航：如何在页面加载时保持所选选项-优快云博客

从后端获取数据加载下拉选项

想象一下，您正在使用<select>元素在页面之间导航–通常，当页面重新加载时，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外观：

以下是样式：

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

注意：可以通过HTML静态设置它，而不是通过JavaScript将selected属性添加到相应选项。因此，例如，在“ 动物”页面中，我们可以将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 page ），则不会看到期望的选项。发生这种情况是因为本地存储中没有任何url值，或者存储的值不正确。

结论

在本教程中，我们介绍了两种在页面加载时维护所选选项的方法。即使我们使用了一些静态数据作为演示，我也希望您能理解这个主意，并且可以将今天获得的知识应用到您的项目中。

翻译自: https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load--cms-32210

从后端获取数据加载下拉选项