有没有一种方法可以使用纯javascript根据另一个下拉列表过滤一个下拉列表？

我有两个字段“控制器类型”和“测试类型”。我想要的是，当控制器是“EBOD”时，下拉列表中应该出现的测试是（'BFT'，'CTO'，'JBOD Generic'）。我尝试使用javascript来实现这一点，但没有找到有效的解决方案。有谁能帮助实现这一目标？ 非常感谢您的帮助。 谢谢

控制器类型
-选择控制器-
突袭
乌木
美联社
测试类型
-选择测试-
BFT
首席技术官
RAID通用
港口检查
FW通用
JBOD通用

我试过这样的东西，但没用

function showsecondlist()
{
var uservalue= document.getElementById("Controller").value;
if(uservalue=='EBOD')
document.getElementById("Test").value.innerHTML='<option value="1.1">BFT</option><option value="1.2">CTO</option><option value="1.2">JBOD Generic</option>';
}

函数showsecondlist（）
{
var uservalue=document.getElementById（“控制器”）.value；
如果（uservalue=='EBOD'）
document.getElementById（“Test”）.value.innerHTML='BFTCTOJBOD Generic'；
}

我会使用下面这样的东西：

//从first select的值映射到
//选择该值时以秒显示
常量映射={
答：['d'，'e']，
b:[e'，'f']，
c:['d'，'g']
};
const first=document.getElementById（'first'）；
const second=document.getElementById（'second'）；
//第一次选择“更改”时，显示第二次选择的所有选项，
//如果不存在映射，则显示映射并隐藏其他映射
first.onchange=（{target:{value:selected}}}）=>{
[…second.options].forEach（（o）=>{
如果（！mappings[selected]| | mappings[selected]。包括（o.value））{
o、 style.display=''；
}否则{
o、 style.display='none'；
} 
});
};

首先选择：
...
A.
B
C
D
第二选择：
D
E
F
G
非常感谢您的回复，但我在实现此功能时遇到一个错误“无法将属性“onchange”设置为null”。你能帮我修一下吗？@Jayashri我可以试试。你什么时候写剧本？元素
null
向我表明它还不在DOM中，因此可能将
defer
添加到脚本或将其移动到页面底部会有所帮助。另一种方法可能是在
窗口
对象的DOMContentLoaded事件的侦听器中执行此处显示的工作。当代码出现错误时，我在末尾包含了代码。我现在已经将代码放在我的changehandler中，它给我的错误是“second.options在HTMLSelectElement.first.onchange上不可编辑”。请注意，这些字段集是表单的一部分。你能帮我在我的表单上实现这一点吗？@Jayashri你的代码几乎可以工作了！您需要将
.value
从
second
中删除，然后“EBOD Generic”（其中一个是用J编写的）的value或textContent中也会出现输入错误。
function showsecondlist()
{
var uservalue= document.getElementById("Controller").value;
if(uservalue=='EBOD')
document.getElementById("Test").value.innerHTML='<option value="1.1">BFT</option><option value="1.2">CTO</option><option value="1.2">JBOD Generic</option>';
}