如何从下拉列表中获取所选值以显示在顶部并替换标题？

Question

我正在为过滤器使用下拉列表，并希望下拉列表中的选定值显示在顶部，以便用户可以在下拉列表关闭并继续浏览时看到他们的选择。

在这种情况下，假设我选择“选项 2”，我希望将“类别”的跨度部分值替换为“选项 2”。 （我尝试使用 HTML 选择和选项标签，但它们无法触发过滤器。）

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  width: 50px;
  padding: 4px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

p {
  font-size: 16px;
}

<div class="dropdown">
  <span>Category</span>
  <div class="dropdown-content">
    <a href="www.site.com/option1">
      <p>Option 1</p>
    </a>
    <a href="www.site.com/option2">
      <p>Option 2</p>
    </a>
    <a href="www.site.com/option3">
      <p>Option 3</p>
    </a>
  </div>
</div>

Answer 1

问题被标记为 [jQuery]，因此，无需更改 HTML ...

$('a', '.dropdown-content').on('click', function() {
    $(this).closest('.dropdown').find('span').text(this.text());
});

此表达式将为页面上所有类似构造的下拉菜单提供所需的行为。

通过从 clicked 元素遍历 DOM 到 span 元素，不用担心不同下拉菜单之间的串扰。

Answer 2

很简单的东西。为了使它更容易，我会为每个链接添加一个类，并且可能也为跨度添加一个类，以便更好地衡量。总而言之，你会有这样的东西：

<div class="dropdown">
     <span class="selected-category">Category</span>
     <div class="dropdown-content">
          <a class="dropdown-option" href="www.site.com/option1"><p>Option 1</p></a>
          <a class="dropdown-option" href="www.site.com/option2"><p>Option 2</p></a>
          <a class="dropdown-option" href="www.site.com/option3"><p>Option 3</p></a>
     </div>
</div>

document.querySelector('.dropdown-option').forEach(el => el.onclick = (e) => document.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);

如果你不能添加类名，你只需要使用元素类型来构建一个好的选择器。

const categorySpan = document.querySelector('.dropdown span');
const dropdownItems = document.querySelector('.dropdown div a');

那么它和类是一样的。

编辑：根据 Heretic Monkey 的 cmets 更新（谢谢！）