Non so se ho capito bene, prova a vedere se questo esempio fa al caso tuo.
In questo esempio i dati li ho messi in un file json esterno che prelevo in modo asincrono con fetch.

codice:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <select id="brand"></select>
        <br />
        <select id="brand_model"></select>

        <script>
            // prettier-ignore
            const initApp = async () => {
                const brand = document.getElementById('brand')
                const brandModel = document.getElementById('brand_model')

                const objData = await fetch("data.json").then(res =>res.json())

                const fillBrandModel = ()=>{
                    const selectKey = brand.value
                    brandModel.textContent = ''
                    for (const key in objData) {
                        
                        if (selectKey === key){
                        objData[key].forEach(text => {
                            const option = document.createElement('option')
                            option.textContent = text['Name']
                            brandModel.appendChild(option)
                            })
                        }
                    }
                }

                const fillBrand = (()=>{

                    Object.keys(objData).forEach(key => {
                        const option = document.createElement('option')
                        option.textContent =  key
                        brand.appendChild(option)
                    })
                    fillBrandModel()
                })()

                brand.addEventListener("change",fillBrandModel)
            }

            document.addEventListener("DOMContentLoaded", initApp)
        </script>
    </body>
</html>