使用纯JavaScript创建依赖html下拉列表

我正在尝试创建一个相关下拉列表，如果选择选项1，它只显示

div class option1

，如果选择选项2，它显示

div class option2

，我不太擅长JavaScript，（不是jQuery）我正在寻求帮助

    <select id="lstFruits" >
    <option value="1">Mango</option>
    <option value="2">Apple</option>
</select>

<div class ="option1">
<br/><br/>
Colour1 <input type="text"/>
<br/>
Taste1 <input type="text"/>
<br/>
weight1 <input type="text"/>
</div>

<div class="option2">
<br/><br/>
Colour2 <input type="text"/>
<br/>
Taste2 <input type="text"/>
<br/>
weight2 <input type="text"/>
</div>

芒果
苹果



颜色1


品味1


权重1



颜色2


品味2


权重2

我希望如此！这将有助于你：）

---

您可以使用以下代码：

//让DOM在寻址元素之前加载：
document.addEventListener（'DOMContentLoaded'，函数（）{
var fruits=document.querySelector（“#lstFruits”），
divs=[document.querySelector（'.option1'），
document.querySelector（'.option2'）]；
函数显示匹配选项（）{
//根据选定的值显示和隐藏正确的div
divs[+this.value-1].style.display=''；
divs[2-this.value].style.display='none'；
}
//对选择列表中的每个更改执行上述功能
水果。添加的列表（“更改”，显示匹配选项）；
//在页面加载时也执行上述函数，因此
//从一致的情况开始。
显示配对选项。呼叫（水果）；
});

芒果
苹果



颜色1


品味1


权重1



颜色2


品味2


权重2
如果我想在函数
函数showMatchingOptions（）{//基于所选的值divs[+this.value-1].style.display=''；divs[2-this.value].style.display='none'；}
中添加第三个选项，那么您可以将其转换为
for
循环。我在我的答案中添加了一些示例代码。我非常感谢，再次感谢您的真诚帮助