Displaytext auf Basis von Informationen in zwei Dropdown-Menü ausgewählt

Question

Ich brauche ein schnelles Stück Code zu schreiben, der die folgenden Benutzer an der Spitze eines unsere Artikelseiten erlaubt zu tun:

Drop down 1: How old are you?

Drop down 2: What's your favourite fruit?

Basierend auf den obigen Eingaben wird der zusammenfassende Text sofort angezeigt, nachdem die zweite Auswahl getroffen wurde

Für 18-24-Jährige, die Äpfel mögen: Äpfel helfen Ihnen, Ihr Immunsystem in Ihrem Alter aufzubauen!

Für 50-60 Jährige, die Bananen mögen: Bananen helfen im späteren Leben wirklich mit Vitamin C und Knochendichte.

Answer 1

Es hängt alles davon ab, wie Ihre Daten strukturiert sind.

Unter der Annahme, dass es geht um ganz wenige Alter und Früchte sein, eine Art von Datenstruktur wie das funktionieren würde:

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."} 
    ] 
    } 
] 

Dann wird der ausgewählte Wert der Auswahllisten kann verwendet werden, um die Daten zu suchen für den richtigen Text:

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"; 
} 

Dann, wie auch immer Sie die Änderungsereignisse rufen Sie einfach die Suchfunktion binden:

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

    var displayText = fruitText(friut,text); 
}