Javascript 从下拉菜单中选择选项，并在同一页面上显示有关该选项的数据

我目前正在学习html、css、javascript，我正在做一个简单的项目，用户可以从下拉菜单中选择一个选项。数组中有一些关于该选项的数据。我想在同一页上输出这些数据，但在页面的右侧有一点。 我在从下拉菜单中输出与选项相关的数据时有点卡住了。当您从下拉菜单中选择一个选项时，所有数据都会显示在屏幕上，而我只希望每个下拉选项显示一条数据，即选择Apple仅显示Apple数据。 最好不是jquery，现在只是纯javascript。谢谢

文件 .隐藏{ 显示：无； } .表演{ 显示：块； } 列表 选择一个 苹果 巧克力 香蕉 所有食物 食物清单 函数转换值 { var f=document.getElementByIdfood； var chosenFood=f.options[f.selectedIndex]。值； document.getElementByIdchosenFood.value=chosenFood； document.getElementByIdchosenFood.className=show； } 变量foodInfo=[{ 名称：苹果， 颜色：绿色 }, { 名称：巧克力， 颜色：棕色 }, { 名称：香蕉， 颜色：黄色 }]; 函数showFoodinfo { var out=；

---

forvar i=0；i您的问题在这一行：

document.getElementById("chosenFood").value=chosenFood;

A没有值，但您可以使用该属性向div添加内容。在任何情况下，我假设您希望向内部div添加一个新段落，即id为showFoodList的段落

在任何情况下，我都建议使用将事件处理程序附加到元素

固定代码为：

函数转换值 { var f=document.getElementByIdfood； var chosenFood=f.options[f.selectedIndex]。值； document.getElementByIdshowFoodList.innerHTML+=''+chosenFood+'

'； document.getElementByIdchosenFood.className=show； } .隐藏{ 显示：无； } .表演{ 显示：块； } 展示食品清单{ 文本对齐：居中； } 列表 选择一个 苹果 巧克力 香蕉 所有食物 食物清单

---

你的代码和解释让我很困惑。 需要不同的JS技术，我不知道从哪里开始解释我的答案。 关于这件事，请随时问我

第一版 常数 foodInfo= [{名称：“苹果”，颜色：“绿色”} ，{名称：'巧克力'，颜色：'棕色'} ，{名称：'香蕉'，颜色：'黄色'} ] ，selectFood=document.getElementById'food-select' ，listFood=document.getElementById'food-list' ，DomParser=新的DomParser ; 函数newItemitem { 让newItem=` ${item.Name} ${item.color} ` 返回DomParser.parseFromStringnewItem，“text/html”.body.firstChild } foodInfo.forEachitem=> { listFood.AppendChildNewItemItemItem 选择食品。添加新选项项目名称、项目名称 } 选择食物。添加新选项“所有食物”、“全部” selectFood.querySelector'option'。disabled=true const listArticles=listFood.querySelectorAll'article[data ref]' 选择Food.onchange==> { 让我们来选择食物 listArticles.forEachart=> { 如果选择=='All'| |选择===art.dataset.ref 艺术类列表。删除“节点显示” 其他的 艺术类列表。添加“节点显示” } } .noDisplay{display:none！重要；} 食物清单{显示：表格；} 食品清单项目{显示：表行；} 食品清单标签{显示：表格单元格；填充：.2em.7em；} 食品清单物品：第一种{字体重量：粗体；} 列表 选择一个 食物清单 姓名： 颜色：

---

这正是我想要的，非常感谢您的帮助。我现在要看一下实现并学习。Thankshow您是否会更改而不是使用文章来使用表，我在newItem函数中遇到了问题。@Patryk1添加了第二个版本，其中包含table是的，我可以，我继续尝试使用t获取数据上一个代码片段中的newItem函数尝试解析时无效。不知道有可以插入单元格和行的函数。谢谢帮助