I’m facing an issue in creating a custom dropdown checklist using HTML, CSS, and JavaScript. My goal is to display the values of checked checkboxes in the select placeholder. When a user clicks on any checkbox, I want the corresponding text to be appended to the placeholder.
Could someone guide me on the correct approach or provide a code example to achieve this? For a more detailed understanding, I’ve attached an image desired outcome.
Required Outcome is:
document.addEventListener('DOMContentLoaded', function() {
function initializeCustomDropdown(containerSelector) {
var container = document.querySelector(containerSelector);
container.querySelectorAll('.custom-dropdown-onclick').forEach(function(filter) {
filter.addEventListener('click', function() {
var dropdown = this.nextElementSibling;
dropdown.style.display = (dropdown.style.display === 'none' || dropdown.style.display === '') ? 'block' : 'none';
});
});
document.addEventListener('click', function(event) {
if (!event.target.closest(".custom-dropdown-select, .custom-dropdown-area")) {
container.querySelectorAll(".custom-dropdown-area").forEach(function(dropdown) {
dropdown.style.display = 'none';
});
}
});
container.querySelectorAll(".custom-dropdown-all").forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var group = this.dataset.group;
var itemSelected = [];
container.querySelectorAll(group).forEach(function(checkbox) {
checkbox.checked = this.checked;
}, this);
});
});
container.querySelectorAll('.custom-dropdown-child').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var itemSelected = [];
container.querySelectorAll('.custom-dropdown-child:checked').forEach(function(checkbox) {
itemSelected.push(checkbox.value);
});
if (container.querySelectorAll('.custom-dropdown-child:checked').length === container.querySelectorAll('.custom-dropdown-child').length) {
container.querySelector(".custom-dropdown-all").checked = true;
} else {
container.querySelector(".custom-dropdown-all").checked = false;
}
});
});
}
// Usage example
initializeCustomDropdown('.custom-dropdown-one');
});.custom-dropdown-select {
position: relative;
border: 1px solid #999999;
border-radius: 3px;
float: left;
max-width: 200px;
width: 100%;
background: #ffffff;
padding: 5px 10px;
margin: 5px;
height: 20px;
}
.hide {
display: none
}
.custom-dropdown-select-arrow {
position: absolute;
top: 17px;
right: 5px;
border-top: 6px solid #666666;
border-left: 5px solid transparent;
border-bottom: 6px solid transparent;
border-right: 5px solid transparent;
z-index: 1;
}
.custom-dropdown-onclick {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
cursor: pointer;
z-index: 1;
height: 40px;
}
.custom-dropdown-area {
background: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
position: absolute;
width: 100%;
padding: 10px 0;
top: 38px;
left: 0;
z-index: 2;
}
.custom-dropdown-area .custom-dropdown-list {
padding: 0 !important;
margin: 0 !important;
}
.custom-dropdown-area .custom-dropdown-list li {
list-style: none;
}<div class="custom-dropdown-select custom-dropdown-one">
<span class="custom-dropdown-placeholder selected-items-placeholder">All</span>
<span class="custom-dropdown-select-arrow "></span>
<span class="custom-dropdown-onclick"></span>
<div class="custom-dropdown-area hide">
<div>
<input id="select-all" type="checkbox" class="custom-dropdown-all" data-group=".custom-dropdown-child">
<label for="select-all" class="text-black">All</label><br>
<ul class="custom-dropdown-list">
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Office">
<label>Office</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Land">
<label>Land</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Medical">
<label>Medical</label>
</li>
<li><input type="checkbox" class="custom-dropdown-child" d name="item" value="Industrial">
<label>Industrial</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Flex">
<label>Flex</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Specialty">
<label>Specialty</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Medical Office">
<label>Medical Office</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Retail">
<label>Retail</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Build to Suite">
<label>Build to Suite</label>
</li>
</ul>
</div>
</div>
</div>>Solution :
I have modified your code and hope it will fulfill your requirements
document.addEventListener('DOMContentLoaded', function () {
function initializeCustomDropdown(containerSelector) {
var container = document.querySelector(containerSelector);
container.querySelectorAll('.custom-dropdown-onclick').forEach(function (filter) {
filter.addEventListener('click', function () {
var dropdown = this.nextElementSibling;
dropdown.style.display = (dropdown.style.display === 'none' || dropdown.style.display === '') ? 'block' : 'none';
});
});
document.addEventListener('click', function (event) {
if (!event.target.closest(".custom-dropdown-select, .custom-dropdown-area")) {
container.querySelectorAll(".custom-dropdown-area").forEach(function (dropdown) {
dropdown.style.display = 'none';
});
}
});
var placeholder = container.querySelector(".selected-items-placeholder");
container.querySelectorAll(".custom-dropdown-all").forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
var group = this.dataset.group;
var itemSelected = [];
container.querySelectorAll(group).forEach(function (checkbox) {
checkbox.checked = this.checked;
}, this);
if (this.checked) {
placeholder.innerHTML = 'All';
} else {
container.querySelectorAll(group + ':checked').forEach(function (checkbox) {
itemSelected.push(checkbox.value);
});
placeholder.innerHTML = itemSelected.join(',');
}
});
});
container.querySelectorAll('.custom-dropdown-child').forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
var itemSelected = [];
container.querySelectorAll('.custom-dropdown-child:checked').forEach(function (checkbox) {
itemSelected.push(checkbox.value);
});
if (container.querySelectorAll('.custom-dropdown-child:checked').length === container.querySelectorAll('.custom-dropdown-child').length) {
container.querySelector(".custom-dropdown-all").checked = true;
placeholder.innerHTML = 'All';
} else {
container.querySelector(".custom-dropdown-all").checked = false;
placeholder.innerHTML = itemSelected.join(',');
}
});
});
}
// Usage example
initializeCustomDropdown('.custom-dropdown-one');
});.custom-dropdown-select {
position: relative;
border: 1px solid #999999;
border-radius: 3px;
float: left;
max-width: 200px;
width: 100%;
background: #ffffff;
padding: 5px 10px;
margin: 5px;
height: 20px;
}
.hide {
display: none
}
.custom-dropdown-select-arrow {
position: absolute;
top: 17px;
right: 5px;
border-top: 6px solid #666666;
border-left: 5px solid transparent;
border-bottom: 6px solid transparent;
border-right: 5px solid transparent;
z-index: 1;
}
.custom-dropdown-onclick {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
cursor: pointer;
z-index: 1;
height: 40px;
}
.custom-dropdown-area {
background: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.24);
position: absolute;
width: 100%;
padding: 10px 0;
top: 38px;
left: 0;
z-index: 2;
}
.custom-dropdown-area .custom-dropdown-list {
padding: 0 !important;
margin: 0 !important;
}
.custom-dropdown-area .custom-dropdown-list li {
list-style: none;
}
.custom-dropdown-placeholder {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="custom-dropdown-select custom-dropdown-one">
<span class="custom-dropdown-placeholder selected-items-placeholder">All</span>
<span class="custom-dropdown-select-arrow "></span>
<span class="custom-dropdown-onclick"></span>
<div class="custom-dropdown-area hide">
<div>
<input id="select-all" type="checkbox" class="custom-dropdown-all" data-group=".custom-dropdown-child">
<label for="select-all" class="text-black">All</label><br>
<ul class="custom-dropdown-list">
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Office">
<label>Office</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Land">
<label >Land</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Medical">
<label >Medical</label>
</li>
<li><input type="checkbox" class="custom-dropdown-child" d name="item" value="Industrial">
<label >Industrial</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Flex">
<label >Flex</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Specialty">
<label >Specialty</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Medical Office">
<label >Medical Office</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Retail">
<label >Retail</label>
</li>
<li>
<input type="checkbox" class="custom-dropdown-child" name="item" value="Build to Suite">
<label >Build to Suite</label>
</li>
</ul>
</div>
</div>
</div>