I have some code for a dropdown with search, with 3 options. I want when an option is clicked, a div that was previously hidden, to show. I would also like for when an option from the drop-down is clicked, for that to be the selection that appears in the textbox and the drop-down to hide. I don’t know why my current code isn’t working. I have implemented the function showDiv(), but it’s not working and I can’t figure out why!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Dropdown Menu with Search</title>
<style>
/* Basic styling for the dropdown */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-label {
font-weight: bold;
padding: 10px;
}
.dropdown-content {
display: block; /* Display the content by default */
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 200px;
border-radius: 5px; /* Rounded corners for the dropdown content */
}
.dropdown-content a {
display: none;
padding: 10px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Styling for the search input */
.search-input-container {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.search-input {
width: 100%;
padding: 8px;
border: none;
border-radius: 20px; /* Rounded corners for the search input */
outline: none;
}
/* Style for the div that appears */
.hidden-div {
display: none;
margin-top: 10px;
padding: 20px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="dropdown-label">Fruit</div>
<div class="dropdown-content">
<div class="search-input-container">
<input type="text" class="search-input" placeholder="Search...">
</div>
<div id="dropdown">
<a href="#" id="a" onclick="showDiv()">Apple</a>
<a href="#" id="b">Banana</a>
<a href="#" id="c">Orange</a>
</div>
</div>
</div>
<div class="hidden-div" id="myDiv">
<p>You selected: <span id="selectedOption"></span></p>
</div>
<script>
// JavaScript to show/hide dropdown content
const dropdownLabel = document.querySelector('.dropdown-label');
const dropdownContent = document.querySelector('.dropdown-content');
dropdownLabel.addEventListener('click', function () {
dropdownContent.style.display = (dropdownContent.style.display === 'block') ? 'none' : 'block';
});
// JavaScript for filtering items
const searchInput = document.querySelector('.search-input');
const links = document.querySelectorAll('.dropdown-content a');
searchInput.addEventListener('input', function () {
const searchText = searchInput.value.toLowerCase();
links.forEach(function (link) {
const itemText = link.textContent.toLowerCase();
if (itemText.includes(searchText)) {
link.style.display = 'block';
} else {
link.style.display = 'none';
}
});
});
links.forEach(function (link) {
link.addEventListener('click', function () {
selectedFruit.textContent = `Selected Fruit: ${link.textContent}`;
toggleDropdown();
});
});
function showDiv() {
document.getElementById('a').style.display = "block";
}
</script>
</body>
</html>
2
Answers
I’ve tried to reproduce the issue you’re reporting, and the thing I immediately notice is that there are some missing references in your example.
selectedFruit.textContent=Selected Fruit: ${link.textContent};"selectedFruit" isn’t defined anywhere in your example. You may need to store a reference to the element you’re trying to mutate.
toggleDropdown();"toggleDropdown" also isn’t a defined function in your example, so the code will also throw an error here.
Here’s a modified version of your script that should work for your requirements: