如何從下拉列表中獲取選定的值以顯示在頂部並替換 Header？

Question

我正在為過濾器使用下拉列表，並希望下拉列表中的選定值顯示在頂部，以便用戶可以在下拉列表關閉並繼續瀏覽時看到他們的選擇是什么。

在這種情況下，假設我 select “選項 2”，我希望將“類別”的跨度部分值替換為“選項 2”。 （我嘗試使用 HTML select 和選項標簽，但它們無法觸發過濾器。）

HTML

<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>

CSS

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

Answer 1

很簡單的東西。 為了使它更容易，我會在每個鏈接中添加一個 class ，並且可能也會在跨度中添加一個，以便更好地衡量。 總而言之，您將擁有如下所示的內容：

<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>

const items = document.getElementsByClassName('dropdown-option');

[].slice.call(items).forEach(el => el.onclick = (e) => document.body.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);

如果您無法添加 class 名稱，則只需使用元素類型構建一個好的選擇器。

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

然后它與 class 相同。

Answer 2

問題被標記為 [jQuery]，因此，無需更改 HTML ...

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

此表達式將為頁面上所有類似構造的下拉列表提供所需的行為。

通過從 clicked 元素遍歷 DOM 到 span 元素，不用擔心不同下拉菜單之間的串擾。