根据在两个下拉列表中选择的信息显示文本
Display text based on info selected in two drop downs
我需要快速编写一些代码,让位于我们文章页面顶部的用户可以执行以下操作:
Drop down 1: How old are you?
Drop down 2: What's your favourite fruit?
根据上面的输入,根据上面的两个选择,在进行第二次选择后,摘要文本会立即显示在下方,例如
对于18-24岁喜欢苹果的人:苹果可以帮助你在这个年龄建立免疫系统!
对于50-60岁喜欢吃香蕉的人来说:香蕉对以后生活中的维生素C和骨密度确实有帮助。
这完全取决于您的数据结构。
假设会有很多年龄和水果,像这样的某种数据结构会起作用:
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."}
]
}
]
然后 select 列表的 selected 值可用于在数据中搜索正确的文本:
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";
}
那么你如何绑定更改事件只需调用查找函数:
document.getElementById("age").onchange = function()
{
var age= document.getElementById("age").value();
var fruit = document.getElementById("fruit").value();
var displayText = fruitText(friut,text);
}
我需要快速编写一些代码,让位于我们文章页面顶部的用户可以执行以下操作:
Drop down 1: How old are you?
Drop down 2: What's your favourite fruit?
根据上面的输入,根据上面的两个选择,在进行第二次选择后,摘要文本会立即显示在下方,例如
对于18-24岁喜欢苹果的人:苹果可以帮助你在这个年龄建立免疫系统!
对于50-60岁喜欢吃香蕉的人来说:香蕉对以后生活中的维生素C和骨密度确实有帮助。
这完全取决于您的数据结构。
假设会有很多年龄和水果,像这样的某种数据结构会起作用:
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."}
]
}
]
然后 select 列表的 selected 值可用于在数据中搜索正确的文本:
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";
}
那么你如何绑定更改事件只需调用查找函数:
document.getElementById("age").onchange = function()
{
var age= document.getElementById("age").value();
var fruit = document.getElementById("fruit").value();
var displayText = fruitText(friut,text);
}