texte d'affichage basé sur les informations sélectionné dans deux menus déroulants

Question

je dois écrire un peu rapide de code qui permet aux utilisateurs en haut d'une de nos pages d'article pour effectuer les tâches suivantes:

Drop down 1: How old are you?

Drop down 2: What's your favourite fruit?

D'après les entrées ci-dessus, le texte récapitulatif s'affiche instantanément après la deuxième sélection, en fonction des deux sélections ci-dessus. Pour les 18-24 ans qui aiment les pommes: Les pommes vous aident à construire votre système immunitaire à votre âge! Pour les 50-60 ans qui aiment les bananes: Les bananes aident vraiment à la vitamine C et à la densité osseuse plus tard dans la vie.

Answer 1

Tout dépend de la structure de vos données.

En supposant qu'il va être assez peu les âges et les fruits, une sorte de structure de données comme cela fonctionnerait:

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

Ensuite, la valeur sélectionnée des listes de sélection peut être utilisé pour rechercher les données pour le texte à droite:

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

Alors, comment jamais vous lier les événements de changement appellent juste la fonction de recherche:

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

    var displayText = fruitText(friut,text); 
}