我正在為過濾器使用下拉串列，并希望從下拉串列中選擇的值顯示在頂部，以便用戶可以在下拉串列關閉并繼續瀏覽時看到他們的選擇。
在這種情況下，假設我選擇了“選項 2”，我希望將“類別”的跨度部分值替換為“選項 2”。（我嘗試使用 HTML 選擇和選項標簽，但它們無法觸發過濾器。）
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;
}
}
uj5u.com熱心網友回復：
很簡單的東西。為方便起見，我會向每個鏈接添加一個類，并且可能也向跨度添加一個類，以便更好地衡量。總而言之，您將擁有如下所示的內容：
<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);
如果你不能添加類名，你只需要使用元素型別來構建一個好的選擇器。
const categorySpan = document.body.querySelector('.dropdown span');
const dropdownItems = document.body.querySelector('.dropdown div a');
那么它與類相同。
uj5u.com熱心網友回復：
問題被標記為 [jQuery]，因此，無需更改 HTML ...
$('a', '.dropdown-content').on('click', function() {
$(this).closest('.dropdown').find('span').text(this.text());
});
此運算式將為頁面上所有類似構造的下拉串列提供所需的行為。
通過將 DOM 從點擊元素遍歷到 span 元素，無需擔心不同下拉串列之間的串擾。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396707.html
標籤：javascript html 查询 css