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

There are a lot of examples in StackOverflow and in the web. Just google that and you will find many tutorials. — Bruno Monteiro, Sep 16 '19 at 00:54
Possible duplicate of [Drop-down box dependent on the option selected in another drop-down box](https://stackoverflow.com/questions/19728666/drop-down-box-dependent-on-the-option-selected-in-another-drop-down-box) — Bruno Monteiro, Sep 16 '19 at 00:54
This is the script for [dependent dropdowns for U.S. States, Counties and Cities](https://sites.google.com/view/googlappsscript/hot-off-the-presses/dependant-dropdowns) — Cooper, Sep 16 '19 at 01:27

score 2 · Answer 1 · answered Sep 16 '19 at 01:08

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.

How to create dropdown lists that rely on each other

1 Answers1