Javascript 交互式更新下拉列表

我想实现这些下拉列表，在您选择以前的输入时更新数据，例如，您选择

索尼

作为“品牌”，然后您得到了所有

索尼

电视型号。。然后那个模型的所有变体，我在数组中有所有的数据，但最初它在airtable上（类似csv））不确定如何处理它，我应该保存参数并向下工作，还是有一些库使这个任务更容易？谢谢，谢谢你的建议

---

如果您提供您当前的尝试是什么，我们就可以知道您真正想要实现的是什么

下面是一个使用JS的级联下拉列表的基本示例

const数据=[
{品牌：“品牌A”，型号：[“a1型”、“a2型”、“a3型”]，
{品牌：'品牌B'，型号：['b1型'，'b2型'，'b3型']}，
{品牌：'品牌C'，型号：['c1型'，'c2型'，'c3型']}，
{品牌：“品牌D”，型号：[“d1型”、“d2型”、“d3型”]，
];
const brands=document.getElementById（'brands'）；
const models=document.getElementById（'models'）；
//从数据集中填充品牌下拉列表
data.forEach（d=>{
const option=document.createElement（'option'）；
option.value=d.brand；
option.innerText=d.brand；
品牌。附加（选项）；
});
//任何时候品牌改变，重新填充模型
//基于所选品牌的下拉列表
brands.addEventListener（'change'，e=>{
const val=e.target.value；
const brand=data.find（d=>d.brand==val）；
models.innerHTML=''；
brand.models.forEach（m=>{
const option=document.createElement（'option'）；
option.value=m；
option.innerText=m；
模型。附加（选项）；
});
});

烙印
挑选
模型