我在使用HTML、CSS和JavaScript创建自定义下拉列表时遇到了一个问题.我的目标是在 Select 占位符中显示选中的复选框的值.当用户点击任何复选框时，我希望相应的文本被追加到占位符.
有人能指导我正确的方法或提供一个代码示例来实现这一点吗？为了更详细地了解，我附上了一张想要的结果的图像.
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>