<!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, Ethnicity, and Age</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, Ethnicity, and Age</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>
<!-- Ethnicity Selection -->
<div class="container">
<h2>Ethnicity</h2>
<div id="ethnicityContainer"></div> <!-- Ethnicity options will appear dynamically -->
</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"></div> <!-- Subranges will appear dynamically -->
</div>
<!-- Years -->
<div class="container">
<h2>Years</h2>
<div id="yearsContainer"></div> <!-- Years will appear dynamically -->
</div>
<button type="button" onclick="handleSubmit()">Submit</button>
</form>
<h2>Selected Filters</h2>
<div id="selectedFilters"></div>
<script>
// Subrange data including ethnicity
const subRangesData = {
"Total people": [
{ range: "European" },
{ range: "Maori" },
{ range: "Pacific Peoples" },
{ range: "Asian" },
{ range: "Middle Eastern/Latin American/African" },
{ range: "Other ethnicity", years: ["New Zealander", "Other ethnicity nec"] },
{ range: "Total people stated" },
{ range: "Not elsewhere included" }
]
};
// Current gender selection
let selectedGender = "Male";
let selectedEthnicities = [];
// Update gender selection
function updateGender() {
const genderRadioButtons = document.querySelectorAll('input[name="gender"]');
genderRadioButtons.forEach((radio) => {
if (radio.checked) {
selectedGender = radio.value;
}
});
}
// Dynamically update ethnicity
function updateEthnicity() {
const ethnicityContainer = document.getElementById("ethnicityContainer");
ethnicityContainer.innerHTML = "";
const ethnicityData = subRangesData["Total people"];
ethnicityData.forEach(({ range, years }) => {
const ethnicityDiv = document.createElement("div");
if (years) {
// If years are specified, display a multi-selection checkbox
const yearCheckboxes = years.map(year => {
return `<label>
<input type="checkbox" class="ethnicity-year" data-range="${range}" data-year="${year}" onchange="updateSelectedEthnicity()"> ${year}
</label><br>`;
}).join("");
ethnicityDiv.innerHTML = `
<label>
<input type="checkbox" class="ethnicity-group" data-group="${range}" onchange="updateSelectedEthnicity()"> ${range}
</label><br>
${yearCheckboxes}
`;
} else {
// If no years, just display the ethnicity as a checkbox
ethnicityDiv.innerHTML = `
<label>
<input type="checkbox" class="ethnicity-group" data-group="${range}" onchange="updateSelectedEthnicity()"> ${range}
</label><br>
`;
}
ethnicityContainer.appendChild(ethnicityDiv);
});
}
// Update ethnicity selection
function updateSelectedEthnicity() {
const selectedEthnicityGroups = document.querySelectorAll(".ethnicity-group:checked");
const selectedYears = document.querySelectorAll(".ethnicity-year:checked");
selectedEthnicities = [];
selectedEthnicityGroups.forEach((group) => {
selectedEthnicities.push(group.dataset.group);
});
// Include selected years in ethnicity groups
selectedYears.forEach((year) => {
const group = year.dataset.range;
if (!selectedEthnicities.includes(group)) {
selectedEthnicities.push(group);
}
});
console.log("Selected Ethnicities: ", selectedEthnicities); // For debugging
}
// 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) {
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}`];
// Add selected ethnicities
selectedFilters.push(`Ethnicities: ${selectedEthnicities.join(", ")}`);
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.";
}
// Initialize the ethnicity options
updateEthnicity();
</script>
</body>
</html>
