如何在Javascript中基于选择选项隐藏/显示列表

我是网页设计HTML/CSS/JAvascript的初学者

我有一个带有下拉列表和一些无序列表的表单，每个选项一个，全部隐藏。 我想根据下拉列表中选择的选项显示相应的列表

这是一个示例，我有20多个选项，我不能在if-else模式下编码，因为数字可能会演变

有人可以帮我

提前谢谢

---

PS：我只使用javascript，不使用Jquery，所以首先需要在下拉列表更改时创建一个事件侦听器。然后，您需要隐藏正在显示的任何列表，最后根据下拉列表中选择的值显示所需的列表

document.getElementById('dropdown').
    // Adding the event listener based on element id.
    addEventListener('change', (evt) => {
      // Hiding every list using a querySelector.
      document.querySelectorAll('ul').forEach(list => {list.style.display = 'none'});
      // Showing the needed list based on dropdown value.
      document.getElementById(evt.target.value).style.display = 'block';
    });

工作代码笔：

var ddl=document.querySelector'dropdown'； var-prevEl； 函数转换{ 伊夫普雷维尔{ prevEl.style.display=无； } var id=ddl.value； ifid{ var el=document.querySelector+id； el.style.display=块； prevEl=el； } } 选择1 选择2 选择3 列表选项1 列表选项1 列表选项2 列表选项2 列表选项3 列表选项3

---

我建议使用类来隐藏元素。然后可以使用javascript添加和删除该类。添加和删除带有display的类的原因：none是为了满足具有块以外的显示的元素

//获取列表并存储在变量中 让optionLists=document.querySelectorAllul[id^=option]； //为类设置contant，如果更改类名，只需更改一次即可 const HIDDEN_CLASS=隐藏； //在下拉列表中设置事件处理程序 document.GetElementById下拉列表.addEventListenerchange，函数{ //选定值 var val=该值； //循环浏览列表 forvar i=0；i你试过什么？请显示您的最佳尝试，并解释出错的原因、错误、意外结果等。将事件侦听器添加到用于侦听更改事件的下拉列表中，并使用this.value作为要显示的列表的id。您是否有多个列表可启用显示/隐藏，还是有其他原因导致多个列表

document.getElementById('dropdown').
    // Adding the event listener based on element id.
    addEventListener('change', (evt) => {
      // Hiding every list using a querySelector.
      document.querySelectorAll('ul').forEach(list => {list.style.display = 'none'});
      // Showing the needed list based on dropdown value.
      document.getElementById(evt.target.value).style.display = 'block';
    });