根据在两个下拉菜单中选择的信息显示文本[关闭]

Question

我需要编写一小段代码，让位于我们文章页面顶部的用户能够执行以下操作：

Drop down 1: How old are you?

Drop down 2: What's your favourite fruit?

根据上面的输入，在做出第二次选择后，摘要文本会立即显示在下面，基于上面的两个选择，例如

对于喜欢苹果的 18-24 岁人群：苹果可以帮助您在您的年龄建立免疫系统！

对于喜欢香蕉的 50-60 岁人群：香蕉确实有助于晚年的维生素 C 和骨密度。

Answer 1

这完全取决于您的数据的结构。

假设会有相当多的年龄和成果，像这样的某种数据结构会起作用：

  var text = [
  { fruit: "bananas", ages: 
    [
      { range: "18-24", text:"Bananas are awesome"},
      { range: "50-60", text:"Bananas really help with vitamin C and bone density in later life."}
    ]
  },
  { fruit: "apples", ages: 
    [
      {range: "18-24", text:"Apples help you build your immune system at your age!"},
      {range: "50-60", text:"Apples are cheap."}
    ]
   }
]

然后可以使用选择列表的选定值在数据中搜索正确的文本：

function findText(fruit,age)
{
    for(var i =0; i < text.length; i++)
  {
    if(text[i].friut == fruit)
    {
        for(var j=0; j < text[i].ages.length; j++)
      {
        if(text[i].ages[j].range == age)
            return (text[i].ages[j].text;
      }
    }
  }
  return "No match";
}

那么你如何绑定更改事件只需调用 find 函数：

document.getElementById("age").onchange = function()
{
  var age= document.getElementById("age").value();
  var fruit = document.getElementById("fruit").value();

  var displayText = fruitText(friut,text);
}