How to create dropdown lists that rely on each other

Question

I want to create 4 dropdown lists. Like this:

    District: 

<select id="district">
    <option>Select a District</option>
    <option value="district1">dstrict1</option>
    
</select>

<br>
<br>

School: 
<select id="school">
    <option value=school1><a id="school1">Select a District</a></option>
    <option value=school2><a id="school2">Select a district</a></option>
    </select>
    <br>
    <br>
Grade: 
<select id="grade">
    <option value="grade1">Select a school</option>
    <option value="grade2">7th grade</option>
    <option value="grade3">8th grade</option>
    <br>
    <br>
    </select>
House: 
<select id="grade">
    <option>Select a school</option>
    <option value="house1">house1</option>
    <option value="house2">house2</option>
    <br>
    <br>
    </select>

However, I want the items shown in the school list (along with the values) to be dependent upon what district I choose. Along with that, the grade list (along with the values) is dependent upon what school you choose. Finally, the house list (along with the values) needs to be dependent upon what grade you picked. I'm working with a program that doesn't support add ons so the code would need to be pure html and javascript

Answer 1

The question has a few layers. But I essentially think what you want to look into is generating your lists or arrays through javascript based on what is chosen.

Without knowing the scale of your project I would have the a json array for all the data that will populate your list. An example of this might be:

var schoolListData = {
    "schools": {
        "school1": {
            "name": "school 1",
            "id": "1",
            "categories": ["district1", "grade2"]
        },
        "school2": {
            "name": "school 2",
            "id": "2",
            "categories": ["district2", "grade1"]
        }
    },
    "grades": {
        "grade1": {
            "name": "grade 1",
            "id": "1",
            "categories": ["school1", "grade2"]
        },
        "grade2": {
            "name": "grade 2",
            "id": "2",
            "categories": ["school2", "grade3"]
        },
        "grade3": {
            "name": "grade 3",
            "id": "3",
            "categories": ["district1", "grade1"]
        }
    }
    "districts": {
        "district1": {
            "name": "district 1",
            "id": "1",
            "categories": ["school1", "grade2"]
        },
        "district2": {
            "name": "district 2",
            "id": "2",
            "categories": ["school2", "grade3"]
        },
        "district3": {
            "name": "district 3",
            "id": "3",
            "categories": ["district1", "grade1"]
        }
    }
}

So all the items in your dropdown menu would be referenced from the JSON array you create(or better yet build out your dropdown menus using the JSON array you create).

From there, depending on what the user selects, code out your JS to cross reference the categories array. So if the user selects school1 , only the grades & districts that are present in the categories array of the school1 object will be shown to the user.

This is the direction you might want to start looking towards.