OneCompiler

Filters html

111

Example heading with h2 size

Example heading with h3 size

Following is sample java code.
``

`
``

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-level Age Filters</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } select, ul { margin: 10px 0; padding: 5px; } </style> </head> <body> <h1>Multi-level Age Filters</h1> 
<h2>Main Ranges</h2>
<select id="mainRange" onchange="updateSubRanges()">
    <option value="">-- Select Main Range --</option>
    <option value="0-4">0 - 4</option>
    <option value="5-30">5 - 30</option>
    <option value="31-60">31 - 60</option>
    <option value="61-120">61 - 120</option>
</select>

<h2>Sub Ranges (5-Year Intervals)</h2>
<select id="subRange" onchange="updateYears()" disabled>
    <option value="">-- Select Sub Range --</option>
</select>

<h2>Years</h2>
<ul id="yearList"></ul>

<script>
    // Define main and sub ranges
    const subRanges = {
        "0-4": [[0, 4]],
        "5-30": [[5, 9], [10, 14], [15, 19], [20, 24], [25, 30]],
        "31-60": [[31, 35], [36, 40], [41, 45], [46, 50], [51, 55], [56, 60]],
        "61-120": [[61, 65], [66, 70], [71, 75], [76, 80], [81, 85], [86, 90], [91, 95], [96, 100], [101, 105], [106, 110], [111, 115], [116, 120]],
    };

    // Update sub ranges based on selected main range
    function updateSubRanges() {
        const mainRange = document.getElementById('mainRange').value;
        const subRangeSelect = document.getElementById('subRange');
        const yearList = document.getElementById('yearList');
        
        // Clear previous options and disable subrange dropdown
        subRangeSelect.innerHTML = '<option value="">-- Select Sub Range --</option>';
        yearList.innerHTML = '';
        subRangeSelect.disabled = true;

        if (mainRange && subRanges[mainRange]) {
            // Populate subranges
            subRanges[mainRange].forEach(([start, end]) => {
                const option = document.createElement('option');
                option.value = `${start}-${end}`;
                option.textContent = `${start} - ${end}`;
                subRangeSelect.appendChild(option);
            });

            subRangeSelect.disabled = false;
        }
    }

    // Update years based on selected subrange
    function updateYears() {
        const subRange = document.getElementById('subRange').value;
        const yearList = document.getElementById('yearList');

        // Clear previous year list
        yearList.innerHTML = '';

        if (subRange) {
            const [start, end] = subRange.split('-').map(Number);
            for (let year = start; year <= end; year++) {
                const li = document.createElement('li');
                li.textContent = year;
                yearList.appendChild(li);
            }
        }
    }
</script>
</body> </html>