115 lines
3.1 KiB
PHP
115 lines
3.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Select Dropdown with Checkboxes</title>
|
|
<style>
|
|
.multiselect {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
|
|
.selectBox {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.selectBox select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.overSelect {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.checkboxes {
|
|
display: none;
|
|
border: 1px #dadada solid;
|
|
position: absolute;
|
|
background-color: white;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.checkboxes label {
|
|
display: block;
|
|
padding: 10px;
|
|
}
|
|
|
|
.checkboxes label:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="multiselect">
|
|
<div class="selectBox" onclick="toggleDropdown()">
|
|
<select>
|
|
<option>Select Sources</option>
|
|
</select>
|
|
<div class="overSelect"></div>
|
|
</div>
|
|
<div id="checkboxes" class="checkboxes">
|
|
<label for="source1">
|
|
<input type="checkbox" id="source1" name="sources[]" value="source1" /> Source 1
|
|
</label>
|
|
<label for="source2">
|
|
<input type="checkbox" id="source2" name="sources[]" value="source2" /> Source 2
|
|
</label>
|
|
<label for="source3">
|
|
<input type="checkbox" id="source3" name="sources[]" value="source3" /> Source 3
|
|
</label>
|
|
<label for="source4">
|
|
<input type="checkbox" id="source4" name="sources[]" value="source4" /> Source 4
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let expanded = false;
|
|
|
|
function toggleDropdown() {
|
|
const checkboxes = document.getElementById('checkboxes');
|
|
if (!expanded) {
|
|
checkboxes.style.display = 'block';
|
|
expanded = true;
|
|
} else {
|
|
checkboxes.style.display = 'none';
|
|
expanded = false;
|
|
}
|
|
}
|
|
|
|
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
|
|
const selectBox = document.querySelector('.selectBox select option');
|
|
|
|
checkboxes.forEach((checkbox) => {
|
|
checkbox.addEventListener('change', () => {
|
|
const selectedValues = Array.from(checkboxes)
|
|
.filter((cb) => cb.checked)
|
|
.map((cb) => cb.value);
|
|
|
|
if (selectedValues.length === checkboxes.length) {
|
|
selectBox.textContent = "All selected";
|
|
} else if (selectedValues.length > 3) {
|
|
selectBox.textContent = `${selectedValues.length} of ${checkboxes.length} selected`;
|
|
} else {
|
|
selectBox.textContent = selectedValues.length
|
|
? selectedValues.join(', ')
|
|
: 'Select Sources';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|