Javascript 如何从下拉选择中访问多维数组属性

我正在为我的JS类做一个赋值，我正在试图弄清楚如何根据用户从下拉菜单中的选择从数组中访问特定属性。（我倾向于尝试我们正在学习的东西之前的东西，并陷入这些束缚）

首先，我不知道该怎么称呼这些数据。数据帧？子集？地图？阵列？多属性对象列表？（在为本文创建标记后，我想知道这是否是一个多维数组）

如果描述得不好，我道歉

到目前为止，我已经能够直接访问每个属性，但还没有想出如何通过用户选择菜单做到这一点。我在选项的value属性中添加了id，但不知道如何在选择后使用它访问其余属性

这是我的剧本

const flavors = [
    {
        "flavor":"Tangy Taro Eggy",
        "description":"",
        "img_src":"images/tangy-taro-eggy.jpg",
        "id": 1
    },
    {
        "flavor":"Beetle Bark Raspberry",
        "description":"",
        "img_src":"images/beetle-bark-raspberry.jpg",
        "id": 2
    },
    {
        "flavor":"Cali CBD-licious Creme",
        "description":"",
        "img_src":"images/cali-cbd-licious-creme.jpg",
        "id": 3
    },
    {
        "flavor":"Durian Delight",
        "description":"",
        "img_src":"images/durian-delight.jpg",
        "id": 4
    },
    {
        "flavor":"Vanilla",
        "description":"",
        "img_src":"vanilla.jpg",
        "id": 5
    }
];     
var select = document.getElementById("flavor_list"); //this is the id for <select> element in my HTML

flavors.forEach(function populate_list(item){
    var option = document.createElement('option');
    var img_src =flavors.img_src; //This one doesn't do anything becuase the value isn't read (which I don't know what that means) 
    //I tried defining this variable outside of the function as well but the alert still doesnt work
    option.value = item.id; // I created unique values for each option but don't know how to use them to get more info
    option.innerHTML = item.flavor;
    select.appendChild(option)
})
select.onchange = function fetch_info() {
   alert(this.img_src) // this is just a test to see if I got the info. 
//Once I figure this out I will be able to complete there rest of the assignment
}

const-flavors=[
{
“味道”：“刺鼻的芋头蛋”，
“说明”：“，
“img_src”：“images/tangy taro eggy.jpg”，
“id”：1
},
{
“味道”：“甲壳虫树皮覆盆子”，
“说明”：“，
“img_src”：“images/beetle bark raspberry.jpg”，
“id”：2
},
{
“风味”：“卡利CBD利西奶油”，
“说明”：“，
“img_src”：“images/cali cbd licios creme.jpg”，
“id”：3
},
{
“口味”：“榴莲之乐”，
“说明”：“，
“img_src”：“images/durian delight.jpg”，
“id”：4
},
{
“口味”：“香草”，
“说明”：“，
“img_src”：“vanilla.jpg”，
“id”：5
}
];     
var select=document.getElementById（“flavor_列表”）//这是我的HTML中元素的id
flavors.forEach（函数填充列表（项）{
var option=document.createElement（'option'）；
var img_src=flavors.img_src；//这个没有任何作用，因为没有读取值（我不知道这是什么意思）
//我也尝试在函数之外定义这个变量，但警报仍然不起作用
option.value=item.id；//我为每个选项创建了唯一的值，但不知道如何使用它们来获取更多信息
option.innerHTML=item.flavor；
select.appendChild（选项）
})
select.onchange=函数fetch_info（）{
alert（this.img_src）//这只是一个测试，看看我是否得到了信息。
//一旦我弄明白了这一点，我就可以完成剩下的任务了
}

最好只使用JS，不要使用Jquery或类似的东西，因为我们还没有学到任何东西

谢谢你的帮助

---

Kevin

也许可以将它的值作为id，并在数组中循环，找到确切的味道

例如：

select.onchange = function (e) {
     const id = e.target.value;
    
   // find the set which has this id, as you have passed the option value your id
   const flavor = flavors.filter(({ id: flavorId }) => +id === flavorId)[0];
   
   console.log(flavor) // this is just a test to see if I got the info. 
//Once I figure this out I will be able to complete there rest of the assignment
}

---

编辑：确保您的风味id是唯一的。

这似乎不起作用。控制台正在返回[{…}]。还有其他想法吗？我说的对吗？当选择更改时，您希望得到一个包含数据的对象？如果是的话，答案是更新的，你能检查一下吗？是的，我想根据选择的值从数组中获取数据。因此，如果它的选择返回一个1的id，我可以拉名称，图像和描述，并显示在下面。是的，我会再次检查，谢谢你的帮助，现在它回来了，没有定义。flavorID应该来自数组还是您编写的函数所特有的？flavorID来自我已经破坏的数组。你能查一下这个链接吗