I am using a dropdown for filters and want the selected value from the dropdown to appear at the top so users can see what their selection is when the dropdown closes and they continue browsing.
In this scenario, let's say I select "Option 2", I would want the span section value of "Category" to be replaced by "Option 2". ( I tried using the HTML select and option tags but they just don't work to trigger the filter.)
.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>Pretty simple stuff. To make it easier, I would add a class to each of the links and probably one to the span too for good measure. All in all, you would have something that looks like this:
<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);
if you can't add a class name, you just need to build a good selector using the element types instead.
const categorySpan = document.querySelector('.dropdown span');
const dropdownItems = document.querySelector('.dropdown div a');
then it's the same thing as with the class.
Edit: Updated based on comments from Heretic Monkey (thanks!)
Question is taggged [jQuery], therefore, without needing to change the HTML ...
$('a', '.dropdown-content').on('click', function() {
$(this).closest('.dropdown').find('span').text(this.text());
});
This expression will give all similarly constructed dropdowns on the page the required behaviour.
By traversing the DOM from the clicked element to the span element, there's no fear of cross-talk between different dropdowns.