Javascript 根据选择值显示元素

我有一个问题，关于如何获得var，然后显示他的具体div。 在这个例子中，如果我选择C然后选择Juice，那么需要出现菜单1。 问题是，我不知道如何获得var，然后简单地让跳水出现。 当我选择其他配料时，比如A，然后是茶，菜单1需要隐藏，菜单2必须出现

谢谢你的帮助

var mealsByCategory={ A:[汤、汁、茶、其他]， B:[汤、果汁、水、其他]， C:[汤、果汁、咖啡、茶、其他] } 函数转换值{ 如果value.length==0 document.getElementByIdcategory.innerHTML=； 否则{ var-catOptions=； 对于mealsByCategory[值]中的categoryId{ catOptions+=+mealsByCategory[value][categoryId]+； } document.getElementByIdcategory.innerHTML=catOptions； } } var Juice=this.id； $'menu-1'+id.css{ 显示：内联块 }; .menu-1{ 显示：无； } 选择 A. B C 选择 菜单1您可以使用。按如下方式查找和选择：

var selected_value = $('#my-select').find('option:selected');

if (selected_value === 'C') {
    $('#target').removeClass('hidden')
}

参考文献：

---

注意：这不会通过复制和粘贴工作，您将不得不修改您的脚本。这只是核心原则：

这是实现它的一种方法

请注意，我只添加了一条您在问题中指定的规则1，因此，除了使用新选项填充second select之外，此代码的唯一功能是，当您选择A，然后选择Tea时，menu1隐藏，menu2出现

如果您想要其他可能需要的规则，那么您可以像我在selectEl1.value==='A'&&selectEl2.value=='Tea'时那样指定它们

var mealsByCategory={ A:[汤、汁、茶、其他]， B:[汤、果汁、水、其他]， C:[汤、果汁、咖啡、茶、其他] } const menuEl=document.querySelector'.menu'； const selectEl1=document.querySelector'mean'； const selectEl2=document.querySelector'category' 选择EL1.addEventListener'change'，event=>{ const Founds=mealsByCategory[选择EL1.value] //清除第二个选择的内容并使用新选项填充它 选择el2.innerHTML=； Founds.forEachitem=>{ const option=document.createElement'option'； 选择EL2.0选项； option.textContent=项目； }; }; 选择EL2.addEventListener'change'，event=>{ 如果选择EL1.value=='A'&&selectEl2.value=='Tea'{ document.querySelector.menu1.style.display='none'； document.querySelector.menu2.style.display='block'； } }; 梅努2先生{ 显示：无； } 选择 A. B C 选择 菜单1

---

菜单2我不清楚你问了什么，但无论如何… 下面是我试图优化您的代码的一个片段，我提出了一些可能是您想要的东西：

var mealsByCategory={ A:[汤、汁、茶、其他]， B:[汤、果汁、水、其他]， C:[汤、果汁、咖啡、茶、其他] } //更改第一选择时的代码 $'MEIN'。关于'change'，函数{ //获取第一次选择的选定值 var值=$this.val； //填充第二个选择的选项 var catOptions=选择； 对于mealsByCategory[值]中的categoryId{ catOptions+=+mealsByCategory[value][categoryId]+； } $category.htmlcatopions； }; //关于第二选择命题变更的代码，没有得到你真正想要的 $'category'。关于'change'，函数{ var index=$category选项：selected.index； $'.menus'。隐藏； $'.menu-'+index.show； }; .菜单{ 显示：无； } 选择 A. B C 选择 菜单1 菜单2 菜单3 菜单4

---

菜单5我不明白你想要多少菜单，以及你如何选择要显示的菜单。你能澄清一下吗？对不起，如果不清楚的话。我在这里改进了我的示例：首先选择一个城市，然后选择一个地区，然后显示该地区的信息。我可以选择这个地区没有问题。唯一的问题是，我找不到一种显示地区元素的方法。@Thom pouce dev嗯，你说信息出现了，但我没有看到任何信息出现。你所说的展示地区元素是什么意思？在控制台或某些元素中显示位置？什么是地区元素，你是指所选地区的属性吗？地区元素显示在HTML中。例如：NY-District-1-Address-1我选择纽约，然后选择曼哈顿，然后是随机信息。但当我在第二步中选择曼哈顿（Manhattan）时，我无法显示地址。这是我的更新版本：@Thom pouce dev No，我的意思是让你看到我的更新答案：它应该已经如你所期望的那样工作了。