<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Hierarchical Filtering with Gender</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Dynamic Hierarchical Filtering with Gender</h1>
<form id="filterForm">
<!-- Gender Selection -->
<div class="container">
<h2>Gender</h2>
<label>
<input type="radio" name="gender" value="Male" onchange="updateGender()" checked> Male
</label><br>
<label>
<input type="radio" name="gender" value="Female" onchange="updateGender()"> Female
</label><br>
</div>
<!-- Main Ranges -->
<div class="container">
<h2>Main Ranges</h2>
<label>
<input type="checkbox" class="main-range" data-group="0-4" onchange="updateSubRanges()"> 0 - 4
</label><br>
<label>
<input type="checkbox" class="main-range" data-group="5-30" onchange="updateSubRanges()"> 5 - 30
</label><br>
<label>
<input type="checkbox" class="main-range" data-group="31-60" onchange="updateSubRanges()"> 31 - 60
</label><br>
<label>
<input type="checkbox" class="main-range" data-group="61-120" onchange="updateSubRanges()"> 61 - 120
</label><br>
</div>
<!-- Sub Ranges -->
<div class="container">
<h2>Sub Ranges</h2>
<div id="subRangesContainer">
<!-- Subranges will appear dynamically -->
</div>
</div>
<!-- Years -->
<div class="container">
<h2>Years</h2>
<div id="yearsContainer">
<!-- Years will appear dynamically -->
</div>
</div>
<button type="button" onclick="handleSubmit()">Submit</button>
</form>
<h2>Selected Filters</h2>
<div id="selectedFilters"></div>
<script>
// Subrange and year mappings as per your provided data
const subRangesData = {
"0-4": [{ range: "0-4", years: [0, 1, 2, 3, 4] }],
"5-30": [
{ range: "5-9", years: [5, 6, 7, 8, 9] },
{ range: "10-14", years: [10, 11, 12, 13, 14] },
{ range: "15-20", years: [15, 16, 17, 18, 19, 20] },
{ range: "20-25", years: [20, 21, 22, 23, 24, 25] },
{ range: "26-30", years: [26, 27, 28, 29, 30] }
],
"31-60": [
{ range: "31-35", years: [31, 32, 33, 34, 35] },
{ range: "36-40", years: [36, 37, 38, 39, 40] },
{ range: "41-45", years: [41, 42, 43, 44, 45] },
{ range: "46-50", years: [46, 47, 48, 49, 50] },
{ range: "51-55", years: [51, 52, 53, 54, 55] },
{ range: "56-60", years: [56, 57, 58, 59, 60] }
],
"61-120": [
{ range: "61-70", years: [61, 62, 63, 64, 65, 66, 67, 68, 69, 70] },
{ range: "71-80", years: [71, 72, 73, 74, 75, 76, 77, 78, 79, 80] },
{ range: "81-90", years: [81, 82, 83, 84, 85, 86, 87, 88, 89, 90] },
{ range: "91-100", years: [91, 92, 93, 94, 95, 96, 97, 98, 99, 100] },
{ range: "101-110", years: [101, 102, 103, 104, 105, 106, 107, 108, 109, 110] },
{ range: "111-120", years: [111, 112, 113, 114, 115, 116, 117, 118, 119, 120] }
]
};
// Current gender selection
let selectedGender = "Male";
// Update gender selection
function updateGender() {
const genderRadioButtons = document.querySelectorAll('input[name="gender"]');
genderRadioButtons.forEach((radio) => {
if (radio.checked) {
selectedGender = radio.value;
}
});
}
// Dynamically update subranges
function updateSubRanges() {
const subRangesContainer = document.getElementById("subRangesContainer");
const yearsContainer = document.getElementById("yearsContainer");
subRangesContainer.innerHTML = "";
yearsContainer.innerHTML = "";
const selectedMainRanges = document.querySelectorAll(".main-range:checked");
selectedMainRanges.forEach((mainRange) => {
const group = mainRange.dataset.group;
const subRanges = subRangesData[group];
if (subRanges && subRanges.length > 0) {
subRanges.forEach(({ range }) => {
const subRangeDiv = document.createElement("div");
subRangeDiv.innerHTML = `
<label>
<input type="checkbox" class="sub-range" data-group="${range}" data-parent="${group}" onchange="updateYears()"> ${range}
</label>
`;
subRangesContainer.appendChild(subRangeDiv);
});
}
});
}
// Dynamically update years
function updateYears() {
const yearsContainer = document.getElementById("yearsContainer");
yearsContainer.innerHTML = "";
const selectedSubRanges = document.querySelectorAll(".sub-range:checked");
selectedSubRanges.forEach((subRange) => {
const group = subRange.dataset.group;
const parent = subRange.dataset.parent;
const subRanges = subRangesData[parent];
if (subRanges) {
const matchingSubRange = subRanges.find((sub) => sub.range === group);
if (matchingSubRange) {
matchingSubRange.years.forEach((year) => {
const yearDiv = document.createElement("div");
yearDiv.innerHTML = `
<label>
<input type="checkbox" class="year" data-group="${year}" data-parent="${group}"> ${year}
</label>
`;
yearsContainer.appendChild(yearDiv);
});
}
}
});
}
// Handle form submission
function handleSubmit() {
const selectedFilters = [`Gender: ${selectedGender}`];
const years = document.querySelectorAll(".year:checked");
const subRanges = document.querySelectorAll(".sub-range:checked");
const mainRanges = document.querySelectorAll(".main-range:checked");
// Add selected years
years.forEach((year) => {
selectedFilters.push(`Year: ${year.dataset.group}`);
});
// Add subranges without selected years
subRanges.forEach((subRange) => {
const group = subRange.dataset.group;
const selectedYears = document.querySelectorAll(`.year[data-parent="${group}"]:checked`);
if (selectedYears.length === 0) {
selectedFilters.push(`Subrange: ${group}`);
}
});
// Add main ranges without selected subranges or years
mainRanges.forEach((mainRange) => {
const group = mainRange.dataset.group;
const selectedSubRanges = document.querySelectorAll(`.sub-range[data-parent="${group}"]:checked`);
const selectedYears = document.querySelectorAll(`.year[data-parent^="${group}"]:checked`);
if (selectedSubRanges.length === 0 && selectedYears.length === 0) {
selectedFilters.push(`Main Range: ${group}`);
}
});
// Display selected filters
const selectedDiv = document.getElementById("selectedFilters");
selectedDiv.innerHTML = selectedFilters.length > 0
? `Selected: ${selectedFilters.join(", ")}`
: "No filters selected.";
}
</script>
</body>
</html>
