jquery - Display text based on info selected in two drop downs -

i need write quick bit of code allows users @ top of 1 of our article pages following:

drop down 1: how old you?

drop down 2: what's favourite fruit?

based on inputs above, summary text instantly displays below after second selection made, based on both selections above e.g.

for 18-24 year olds apples: apples build immune system @ age!

for 50-60 year olds bananas: bananas vitamin c , bone density in later life.

it depends on how data structured.

assuming there going quite few ages , fruits, sort of data structure work:

  var text = [   { fruit: "bananas", ages:      [       { range: "18-24", text:"bananas awesome"},       { range: "50-60", text:"bananas vitamin c , bone density in later life."}     ]   },   { fruit: "apples", ages:      [       {range: "18-24", text:"apples build immune system @ age!"},       {range: "50-60", text:"apples cheap."}     ]    } ] 

then selected value of select lists can used search data right text:

function findtext(fruit,age) {     for(var =0; < 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"; } 

then how ever bind change events call find function:

document.getelementbyid("age").onchange = function() {   var age= document.getelementbyid("age").value();   var fruit = document.getelementbyid("fruit").value();    var displaytext = fruittext(friut,text); }